KineticJS .on() 不适用于克隆形状答案

【问题标题】：KineticJS .on() not working on cloned shapeKineticJS .on() 不适用于克隆形状
【发布时间】：2013-06-19 05:37:47
【问题描述】：

我正在制作一个可编辑的图案，用户可以使用和重复使用它来制作更大的图案。当用户将第一个小图案拖到大图案网格中时，我将其克隆，将其添加到另一层并让用户重复使用或编辑它。克隆的节点仍然是可编辑和可拖动的，但绑定的事件不会通过交互触发。这是我的代码：

 var B = A = new Kinetic.Shape();
 var stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 650
  });
 var Alayer = new Kinetic.Layer();
 var Blayer = new Kinetic.Layer();

 var BGrid = new Kinetic.Group();

for(var v = 0; v < 4; v++){
for(var h = 0; h < 4; h++){
    (function(){
        var grid = new Kinetic.Rect({
            x: 300 + (h * 120),
            y: 50 + (v *120),
            width: 120,
            height: 120,
            stroke: 'black',
            strokeWidth: 1,
            listening: false
        });
        BGrid.add(grid);
    })();  
 }

}

(function() {
  var AS = new Kinetic.Rect({
    x: 150,
    y: 110,
    width: 120,
    height: 120,
    draggable:true,
    stroke: 'black',
    strokeWidth: 1,
    offset: [60,60],
    });
B = AS;
Alayer.add(B);
})();

Blayer.add(BGrid);


stage.add(Blayer);
stage.add(Alayer);

Blayer.on('click', function(evt) {
 B = evt.targetNode;
 B.setStroke('red');

});
B.on('dragend',function(){
   var px = B.getX();
   var py = B.getY();
//some code that's not executing
});
A.on('dragend',function(){
var sx = A.getX();
var sy = A.getY();
if((300 < sx && sx < 780) && (50 < sy && sy < 530)){
    A.moveTo(Blayer);
    B = A;
    var C = A.clone();
    C.setPosition(150,110);
    Alayer.add(C);
    A = C;
}else{
    A.setPosition(150,110);
}
Alayer.draw();
Blayer.draw();
});

非常感谢您对此的任何帮助。

【问题讨论】：

标签： javascript html kineticjs

【解决方案1】：

你有错字：

B.on('dragend',function(){
  var px = B.getX();
  var py = B.getY();   // not b.getY();
  alert("dragend!");
  //some code that's executing
});

http://jsfiddle.net/lavrton/JYqJp/

【讨论】：

在我缩短 SO 的代码时输入了错字，这不是问题。出于某种原因，.on() 不能多次工作。
您的 jsfiddle 仅适用于第一个 dragstart 并且不会克隆形状。但我想我想通了。目前正在编辑我的代码，将很快发布最终结果。谢谢

【解决方案2】：

这是我想出的解决方案，不确定它是否会帮助任何人，但我希望它会。

stage.on('dragend',function(e){
var t = e.targetNode;
var n = t.getName();
var sx = t.getAbsolutePosition().x;

if(300 < sx && sx < 780 && n == 'A'){

    //previous code for A

}else if(300 < sx && sx < 780 && n != 'A'){

    //previous code for B

}else if(n == 'A'){

    t.setAbsolutePosition(150,110);

}else{

    t.remove();
}
stage.draw();
});`

【讨论】：