javascript - キャンバス上で複数の図形をドラッグするには? [キネティックス]

Question

例: 1 回のタップで図形が移動します。別のタップが同時に別の図形を動かしています。

score 1 · Accepted Answer

次のようにキネティックグループを設定できます。

空のグループを宣言してドラッグ可能にする方法は次のとおりです。

  var group = new Kinetic.Group({
    x: 220,
    y: 40,
    draggable:true
  });

そのため、シェイプのタップハンドラーで、タップされたオブジェクトをグループに追加できます。

  circle.on('tap', function() {
    group.add(circle);
  });

その後、必要に応じて組み立てたグループをドラッグできます。

複数のグループが必要な場合は、次のように個々の図形を異なるグループ間で移動できます。

    circle.moveTo(someOtherGroup);

score 1 · Accepted Answer

ここで、Kinetic + Multi Touch で行った小さな実験を共有しました。ご覧ください - 「本当の」マルチタッチが Kinetic で利用可能になるまで、おそらく役立つでしょう。

score 1 · Accepted Answer

2 つの図形を同時にドラッグする場合は、ブラウザーからタッチイベントを取得して、次のように読み取る必要があります。

touches[0] and touches[1] events

これは、同時に発生する別々のタッチイベントを区別する方法です

3 に答える 3