javascript - kineticjs 将组附加到鼠标

Question

在 kineticJs 中，是否可以在将组添加到图层后将组绑定到用户鼠标指针，以便用户可以将组移动到他们想要放置的位置？然后，他们将单击以将其放置在该位置。

Answer 1

这就是你可以做到的。当用户想要将组添加到图层时，将执行以下代码：

layer.add(group);
layer.draw();
console.log(stage.getMousePosition());
stage.on('mousemove',
    function (){
        var mouse = stage.getMousePosition();
        group.setX(mouse.x);
        group.setY(mouse.y);
        layer.draw();
    });
stage.on('click',
    function(){
        stage.off('mousemove');
    });

忘了说。为了让舞台连续获得 mousemove 事件，请在某个图层上绘制一个矩形并将其添加到舞台上，即使不透明度为 0，因为它不适用于空白区域。

Answer 2

您还可以在创建组时将 group 属性设置为 draggable: true，或者在创建后将其设置为 draggable。

 <script>
  // make draggable on creation
   var group = new Kinetic.Group({
   draggable: true;
  });

  // make draggable after creation
  group.setDraggable(true);
 </script>

这些也可以在使用相同方法移动组后关闭拖动。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/