0

我正在使用 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

4

1 回答 1

0

对于遇到此问题的任何人，这是我修复它的方法：

我把盒子的顶点和连接它们的线放在不同的层上。一旦我这样做了，可用于鼠标操作（鼠标悬停、拖动等）的顶点（圆圈）。

仍然不太清楚为什么我可以访问图层中的其他形状（重绘线）.....

于 2012-11-29T04:57:45.447 回答