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

【问题标题】：Moving multiple objects simultaneously in createJS/easelJS在 createJS/easelJS 中同时移动多个对象
【发布时间】：2016-07-19 05:18:08
【问题描述】：

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

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

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

Easeljs Scrollable Container

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

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

【问题讨论】：

标签： javascript createjs easeljs

【解决方案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;
  }
}

【讨论】：

使用偏移量非常适合我想要完成的工作，谢谢。