如何在画布上拖动多个形状？ [kineticjs]

Question

例如：一个水龙头正在移动一个形状。 另一个水龙头同时移动另一个形状。

Answer 1

您可以设置像这样的Kinetic Group：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/

以下是如何声明一个空组并使其可拖动：

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

因此，在形状的点击处理程序中，您可以将点击的对象添加到组中。

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

然后，您可以根据需要拖动组装的组。

如果您需要多个组，则可以在不同的组之间移动单个形状，如下所示：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/

    circle.moveTo(someOtherGroup);

Answer 2

在同时拖动两个形状的情况下，您必须从浏览器中获取触摸事件并将其读取为

touches[0] and touches[1] events

这是您区分同时发生的单独触摸事件的方式

官方kineticjs例子：
http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

Answer 3

我分享了一个小实验我做了动力学+多点触摸位置 。 看看 - 也许它可以帮助直到“真正的”多点触控在Kinetic中可用