javascript - Kineticjs：添加矩形，删除矩形，然后再次添加不工作鼠标悬停

Question

我在图层中添加、删除和重新添加 kineticjs 时遇到问题。

重新添加后它停止工作鼠标事件。例子：

object.on("mouseover", function() { console.log("mouseover"); });
layer.add(object);
object.remove();
layer.add(object);

这是该问题的重现：

小提琴

Answer 1

您应该改用工厂方法：http: //jsfiddle.net/VDr6z/1/

var obj = {
    rect : undefined,
    rectstored : function(){
        return new Kinetic.Rect({
            x : 10,
            y : 10,
            width : 30,
            height : 30,
            fill : "rgb(140,140,140)"
        });
    }
};

您还需要管理矩形：

$("#create").click(function(){
    if (obj.rect) return; // don't create more than one rect.

    var rect = obj.rectstored();  // create new rect

    rect.on("mouseover", function(){
        $("#console").html("mouse is over");
    });
    rect.on("mouseout", function(){
        $("#console").html("mouse is out");
    });

    obj.rect = rect;

    layer.add(rect);
    layer.draw();
});

$("#delete").click(function(){
    if (!obj.rect) return;  // exit if there is no rect

    obj.rect.remove();
    delete obj.rect;        // delete reference to rect

    layer.draw();
});​

Answer 2

如果您不需要删除对象，只需隐藏和取消隐藏对象即可为您解决

var javascriptobj = {
    rectstored : new Kinetic.Rect({
        x : 10,
        y : 10,
        width : 30,
        height : 30,
        fill : "rgb(140,140,140)"
    })
};

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

var layer = new Kinetic.Layer();
stage.add(layer);
    layer.add(javascriptobj.rectstored);
    javascriptobj.rectstored.hide();

$("#create").click(function(){
    javascriptobj.rectstored.on("mouseover", function(){
        $("#console").html("mouse is over");
    });
    javascriptobj.rectstored.on("mouseout", function(){
        $("#console").html("mouse is out");
    });

    javascriptobj.rectstored.show();
        layer.draw();
});

$("#delete").click(function(){
    javascriptobj.rectstored.hide();
    layer.draw();
});​