我正在使用 KineticJS 允许用户拖动框的角并使其倾斜。通过大量的 SO 和谷歌搜索，当您拖动其中一个角时，我已经达到了重新绘制新框的程度。
但是，它只能执行一次。在第一次拖动/停止后，角（即圆圈）不再是可拖动或可点击的。在第一次移动之前，圆圈的鼠标悬停文本工作得很好。
为了测试，我使两个框都可以拖动，并且在重绘后它们都是“可达的”。但我已经失去了与圈子的任何联系 - 无法拖动它们或任何东西。我必须将它们重新绑定到听众吗？
有人能指出我正确的方向吗？
这是一个 jsfiddle 的链接：http: //jsfiddle.net/robschaefer/5qE64/2/
所有代码都发布在 jsfiddle 中，但这里是我的 dragmove 和 dragend 函数：
//on drag of corners, redraw line
layer2.get('Circle').on("dragmove", function(){
var c1x = c1.getPosition().x;
var c1y = c1.getPosition().y;
var c2x = c2.getPosition().x;
var c2y = c2.getPosition().y;
var c3x = c3.getPosition().x;
var c3y = c3.getPosition().y;
var c4x = c4.getPosition().x;
var c4y = c4.getPosition().y;
//draw dotted line
var dotted = new Kinetic.Line({
points: [c1x,c1y,c2x,c2y,c3x,c3y,c4x,c4y,c1x,c1y],
stroke: 'red',
draggable: true,
strokeWidth: 3,
});
document.getElementById('output').innerHTML = 'WE ARE MOVING!!!';
layer2.removeChildren();
layer2.add(dotted);
layer2.add(c1);
layer2.add(c2);
layer2.add(c3);
layer2.add(c4);
layer2.draw();
});
layer2.get('Circle').on("dragend", function(){
var c1x = c1.getPosition().x;
var c1y = c1.getPosition().y;
var c2x = c2.getPosition().x;
var c2y = c2.getPosition().y;
var c3x = c3.getPosition().x;
var c3y = c3.getPosition().y;
var c4x = c4.getPosition().x;
var c4y = c4.getPosition().y;
document.getElementById('output').innerHTML = 'drag stopped ' + c1x + ' ' + c1y + ' ' + c2x + ' ' + c2y + ' ' + c3y + ' ' + c4x + ' ' + c4y;
layer2.draw();
});
谢谢你的帮助！
R