Kineticjs：添加矩形，刪除矩形，然後再次添加不工作mouseover

Question

我有一個問題添加，刪除和重新添加kineticjs在圖層中。

它重新添加後停止工作mouseevents。例如：

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

這是問題的一個娛樂：

Fiddle

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