在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;
  }
}