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

Question

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

我想做的是，当红色圆圈移动时，红色十字准线也会移动，以便它们看起来“锁定”在圆圈上。与绿色圆圈相同。

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

Easeljs Scrollable Container

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

有人知道如何实现这一目标吗？我是否正确地认为这可以通过 easelJS 容器以某种方式完成？

Answer 1

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

您还可以只存储每个十字线/圆圈的偏移量，并在圆圈移动时设置十字线位置。

这是一个快速演示: 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;
  }
}