javascript - kineticjs アタッチ グループをマウスに

Question

kineticJs では、レイヤーにグループを追加した後、グループをユーザーのマウス ポインターにバインドして、ユーザーがグループを配置したい場所に移動できるようにすることは可能ですか? 次に、クリックしてその場所にドロップします。

Answer 1

グループプロパティをドラッグ可能に設定することもできます。グループを作成するときにtrueに設定するか、作成後にドラッグ可能に設定します。

 <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/

Answer 2

これがあなたがそれを行う方法です。ユーザーがレイヤーにグループを追加したい場合、次のコードが実行されます。

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 の場合でも、いくつかのレイヤーに四角形を描画してステージに追加します。