Question

Hello everyone,

    var stage = new Kinetic.Stage({
    container: 'container',
    width: 1230,
    height: 40
    });

    var layer = new Kinetic.Layer();
    var rectHeight = 30;
    var rectWidth = 100;
    var rectY = (stage.getHeight() - rectHeight) / 2;

    var triangle = new Kinetic.RegularPolygon({
        x: 25,
        y: 25,
        sides: 3,
        radius: 20,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true,
        dragBoundFunc: function(pos) {
            return {
                x: pos.x,
                y: this.getAbsolutePosition().y
            }
        }
    });

    // add cursor styling
    triangle.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    triangle.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });

    triangle.on('dblclick', function(){
        //alert("down");
        layer.clear();
        stage.clear();
    });

    layer.add(triangle);
    stage.add(layer);
}

This is a snippet of my code. This will create a triangle that is able to drag (got it from http://kineticjs.com/ tutorial).

Purpose: I want it to delete the triangle when i double clicked it.

Problem:

i. The triangle can be deleted but when you redraw the triangle, i will draw below the current location where it is deleted. Same thing happen when it is removed and redraw again and again. It will end up at the bottom of my screen after few times of redrawing.

ii. Alert() is used to pop up a notice right? When i use alert(), the triangle can be removed from the screen. If not, it stays there.

Is there anyway to remove the object by mouse event and when another mouse event happen, it will draw the object at the same location?

Answer 1

Wish people would supply a working JSFiddle of their problem, its a pain to have to do it myself and your much more likely to get a response if you do.

Instead of removing the triangle if you want it to reappear in the same spot, why not just hide it?

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1230,
    height: 40
});

background = new Kinetic.Layer();
background.add(new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    name: 'backLayer'
}));

// this rect will allow us to use mouse events on the stage. There's probably a better way to do this, but I don't know it.
stage.add(background);

var layer = new Kinetic.Layer();
var rectHeight = 30;
var rectWidth = 100;
var rectY = (stage.getHeight() - rectHeight) / 2;

var triangle = new Kinetic.RegularPolygon({
    x: 25,
    y: 25,
    sides: 3,
    radius: 20,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 2,
    draggable: true,
    dragBoundFunc: function(pos) {
        return {
            x: pos.x,
            y: 25
        }
    }
});

// add cursor styling
triangle.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
});

triangle.on('mouseout', function() {
    document.body.style.cursor = 'default';
});

triangle.on('dblclick', function(evt) {
    this.hide();
    layer.draw();
    evt.cancelBubble = true;
});

background.on('click', function() {
    triangle.show();
    layer.draw();
});

layer.add(triangle);
stage.add(layer);​

http://jsfiddle.net/RELQp/