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事件的阶段，在某个图层上绘制一个rect并将其添加到舞台上，即使是不透明度为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/

kineticjs将小组附加到小鼠

2 个答案: