0

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

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

我真的很感激这方面的任何帮助。

4

2 回答 2

0

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

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();
});`
于 2013-06-18T21:37:47.620 回答
0

你有错字：

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/

于 2013-06-18T07:46:35.410 回答