EaselJS：如何用一条线连接两个容器/形状？

Question

我希望能够点击一个容器/形状，并在移动鼠标时绘制一条可以连接到另一个容器/形状的线（一个端点有箭头）。理想情况下，我希望这条线能够自动对齐到目标元素。

我对EaselJS很陌生，不知道该如何实现。我找到了这个链接，但是看不懂： Drawing a Line in a html5 canvas using EaselJS

- Mossi

---

你的问题对于 Stack Overflow 来说有些含糊，你可能需要的更多是一个教程而不是一个简单的答案。但是为了涵盖基本步骤：当鼠标按下并移动时，你只需删除旧线并从固定起点到当前鼠标位置重新绘制一条新线条，为了使它捕捉到位置，你需要计算 mouseX/Y 到 targetX/Y 的距离，如果距离低于某个阈值，则使用 targetX/Y 而不是 mouseX/Y。 - olsn

Answer 1

这是我制作的一个快速演示。

关键步骤如下：

• 监听初始项上的mousedown事件
• 在鼠标按下时创建要绘制连接的形状
• 在舞台上监听mousemove和mouseup事件（注意：您可以在目标上使用pressmove使其更加干净，但您将不会获得其他rollovers）
• 在mousemove事件中重新绘制连接。在这种情况下，我将连接放在初始目标的上方，因此必须偏移端点来进行补偿。我这样做是为了避免跟踪初始目标
• 在mouseup事件中停止mousemove/mouseup，并确定鼠标释放的位置。在这种情况下，如果没有目标，则删除连接，否则以不同颜色重新绘制连接（并捕捉到中心点）

http://jsfiddle.net/lannymcnie/6rh7P/

// Listen for press
end.on("mousedown", handlePress);

// Listen for move/end
stage.addEventListener("stagemousemove", drawLine);
stage.addEventListener("stagemouseup", endDraw);

// Redraw (and remember to clear)
connection.graphics.clear()
   .s("#f00")
   .mt(0,0).lt(stage.mouseX-connection.x, stage.mouseY-connection.y);

// Get the drop target(s)
var targets = stage.getObjectsUnderPoint(stage.mouseX, stage.mouseY);

// Stop Listening
stage.removeEventListener("stagemousemove", drawLine);
stage.removeEventListener("stagemouseup", endDraw);
// Note: This will be a little harder if you are using object-oriented approach, because the scope gets lost.

我认为这是一个很有趣的挑战，只用15分钟就解决了。希望对你有所帮助！祝好。

[更新]

在EaselJS 0.8+中，可以保存任何图形命令并随时更新其值。这样可以避免您每一帧都要重新绘制整个形状。以下是一个快速示例：

connection.graphics.s("#f00").mt(0,0);
var command = connection.graphics.lt(0,0).command;

// Then later
command.x = stage.mouseX-connection.x;
command.y = stage.mouseY-connection.y;
stage.update();

这里有一个样例展示了图形命令（与本例无关）：http://jsfiddle.net/lannymcnie/L2tm9xdm/

- Lanny

---

注意：您肯定可以进行基于距离的检查——但是getObjectsUnderPoint是像素完美的，因此我认为这对于此示例是更好的方法。 - Lanny

非常好的回答。这让我对EaselJS有了很多的了解；我从不知道线条在tick时必须被清除和重新绘制。我会把这个作为脚本的基础。再次感谢！ - Mossi

很高兴能够帮忙。也许我会完善这个，将其打造成EaselJS的官方示例。 - Lanny

有没有机会问一下我如何将线的“末端”连接到形状/容器上？我希望随着我拖动目标容器/形状，线会移动。搜索/阅读手册完全没有帮助。另外一个问题是，我是否可以使用EaselJS“绘制”箭头而不是线？或者我需要使用静态图像？谢谢！ - Mossi

为了将线连接到目标并移动目标，您需要跟踪所有连接，并每次重新绘制连接。为此，一旦创建目标，它可以添加到单个形状中，该形状管理目标之间的重新绘制连接。 - Lanny