[英]KineticJS .on() not working on cloned shape
我正在制作一个可编辑的模式,用户可以使用它并重复使用以制作更大的模式。 当用户将第一个小图案拖到大图案网格中时,我将其克隆,将其添加到另一层中,然后让用户重复使用或编辑它。 克隆的节点仍然是可编辑和可拖动的,但绑定的事件不会通过交互触发。 这是我的代码:
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();
});
我真的很感谢任何帮助。
您有错别字:
B.on('dragend',function(){
var px = B.getX();
var py = B.getY(); // not b.getY();
alert("dragend!");
//some code that's executing
});
这是我想出的解决方案,不确定是否会帮助任何人,但我希望能解决。
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();
});`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.