在 createJS/easelJS 中同时移动多个对象

Question

我一直在 createJS 框架内为一个项目使用 easelJS，并且非常喜欢它，直到最近遇到了障碍。当拖动其中一个组时，我想同时移动多个对象。这是我目前的情况：

我想做的是当红色圆圈移动时，红色十字准线也会移动，使它们看起来 "locked" 到圆圈。绿色圆圈也一样。

我已经能够通过将圆圈和十字准线添加到容器中来完成非常接近于此的事情，如这个问题的答案中所述：

Easeljs Scrollable Container

但我遇到的问题是容器实际上是一个矩形，这样我就可以点击圆圈和十字准线之间的任意位置来移动容器中包含的各种对象。相反，我希望当我点击一个圆圈时仅移动对象。

有谁知道如何做到这一点？我认为这可以通过 easelJS 容器以某种方式完成吗？

Answer 1

容器应该没问题。您可以关闭十字准线的 mouseEnabled 以使其忽略鼠标。

您也可以只存储每个 cross-hair/circle 的偏移量，并在圆移动时只设置十字准线位置。

这是一个快速演示： http://jsfiddle.net/lannymcnie/kah9of6e/

// Set the offset when the circle is pressed
circle.on("mousedown", function(e) {
    circle.offset = new createjs.Point(crosshair.x-circle.x, crosshair.y-circle.y);
});

// Add drag and drop to each shape
circle.on("pressmove", handleDrag);
crosshair.on("pressmove", handleDrag);

function handleDrag(e) {
  // Move the target to the mouse
  e.target.x = e.stageX; e.target.y = e.stageY;

  // If the target is the circle, also move the cross-hair
  if (e.target == circle) {
    // Move the cross-hair
    crosshair.x = circle.x + circle.offset.x;
    x.y = circle.y + circle.offset.y;
  }
}

在 createJS/easelJS 中同时移动多个对象

Moving multiple objects simultaneously in createJS/easelJS

javascript

easeljs

createjs