javascript - Kineticjs：rectを追加し、rectを削除してから、もう一度追加してマウスオーバーが機能しない

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)"
        });
    }
};

また、rectを管理する必要があります。

$("#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();
});​