如何拖动画布上的多个形状?[kineticjs]

How to drag multiple shape on canvas? [kineticjs]

本文关键字：kineticjs 动画 何拖      更新时间：2023-09-26

例如:点击一下就可以移动一个形状。另一个点击正在同时移动另一个图形

我在这里分享了我做的一个关于Kinetic + Multi Touch的小实验。看一看——也许在"真正的"多点触控在Kinetic

中可用之前，它会有所帮助。

你可以像这样创建一个动态组:

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

下面是如何声明一个空组并使其可拖动: 
  var group = new Kinetic.Group({
    x: 220,
    y: 40,
    draggable:true
  });

在形状的tap处理程序中，你可以将tap对象添加到组中。

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

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

如果你需要多个组，你可以在不同的组之间移动单个形状，像这样:

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

    circle.moveTo(someOtherGroup);

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

touches[0] and touches[1] events

这是如何区分同时发生的单独触摸事件

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

相关文章：