Question

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

Answer 1

对于遇到这种情况的人来说，这就是我如何解决它：

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

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

kineticjs重绘后重新绑定对象

1 个答案: