Html5 canvas EaselJS：使用一条线连接2个容器/形状

我希望能够单击一个容器/形状，当我移动鼠标时，会绘制一条可以连接到另一个容器/形状的线（一端有一个箭头）。理想情况下，我希望此行捕捉到目标元素

我是刚接触EaselJS的，我不知道该怎么做。这是我在这里遇到的结束，我无法理解：

---

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

关键步骤是：

• 听第一项上的鼠标向下移动
• 创建一个形状，以便在按下鼠标时绘制连接
• 在舞台上聆听mousemove和mouseup（注意：您可以在目标上使用pressmove使其更加清晰，但不会出现额外的翻转）
• 在mousemove上，重新绘制连接。在本例中，我将连接放置在初始目标的顶部，因此我必须偏移端点以进行补偿。我这样做是为了避免跟踪初始目标）
• 鼠标向上移动时，停止mousemove/mouseup，并确定鼠标在什么位置释放。在本例中，如果没有目标，我将删除连接，否则将连接重新绘制为不同的颜色（并捕捉到中心）

我认为这是一个有趣的挑战，在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();

下面是一个显示图形命令的示例（与本例无关）

---

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

关键步骤是：

• 听第一项上的鼠标向下移动
• 创建一个形状，以便在按下鼠标时绘制连接
• 在舞台上聆听mousemove和mouseup（注意：您可以在目标上使用pressmove使其更加清晰，但不会出现额外的翻转）
• 在mousemove上，重新绘制连接。在本例中，我将连接放置在初始目标的顶部，因此我必须偏移端点以进行补偿。我这样做是为了避免跟踪初始目标）
• 鼠标向上移动时，停止mousemove/mouseup，并确定鼠标在什么位置释放。在本例中，如果没有目标，我将删除连接，否则将连接重新绘制为不同的颜色（并捕捉到中心）

我认为这是一个有趣的挑战，在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();

下面是一个显示图形命令的示例（与本例无关）

---

您的问题有些模糊，因此，您可能需要的更多是一个教程，而不是一个简单的答案。但要涵盖基本步骤：当鼠标按下并移动时，您只需删除旧线，并从固定起点重新绘制一条线到当前鼠标的本地位置，要使其捕捉，您必须计算从鼠标X/Y到目标X/Y的距离，如果距离低于某个阈值，则使用目标X/Y而不是鼠标X/Y。您的问题有点模糊，因此，您可能需要的更多是教程而不是简单的答案。但要涵盖基本步骤：当鼠标按下并移动时，您只需删除旧线，并从固定起点重新绘制一条线到当前鼠标的本地位置，要使其捕捉，您必须计算从鼠标X/Y到targetX/Y的距离，如果距离低于某个阈值，则使用targetX/Y而不是鼠标X/Y。注意：您当然可以进行基于距离的检查，但

getObjectsUnderPoint

是像素级的，因此，我认为这是一个更好的方法为这个样本。美丽的答案。这教会了我很多关于画架的知识；我不知道这条线必须在滴答声中被清除和重画。我会用它作为我剧本的基石。再次感谢！很乐意帮忙。也许我会把它润色一下，让它成为EaselJS的官方样品。有没有可能我会问我如何将线条的末端“连接”到形状/容器上？我希望线在拖动目标容器/形状时移动。搜索/阅读手册毫无帮助。另外一个问题，我能用画架“画”一个箭头而不是一条线吗？或者我需要使用静态图像吗？干杯要将线附加到目标并移动目标，必须跟踪所有连接，并每次重新绘制连接。为此，一旦创建了目标，就可以将其添加到单个形状中，该形状可以管理目标之间的重绘连接。注意：您当然可以进行基于距离的检查，但是

getObjectsUnderPoint

是像素级的，所以我认为这是一种更好的方法。回答很好。这教会了我很多关于画架的知识；我不知道这条线必须在滴答声中被清除和重画。我会用它作为我剧本的基石。再次感谢！很乐意帮忙。也许我会把它润色一下，让它成为EaselJS的官方样品。有没有可能我会问我如何将线条的末端“连接”到形状/容器上？我希望线在拖动目标容器/形状时移动。搜索/阅读手册毫无帮助。另外一个问题，我能用画架“画”一个箭头而不是一条线吗？或者我需要使用静态图像吗？干杯要将线附加到目标并移动目标，必须跟踪所有连接，并每次重新绘制连接。为此，一旦创建了目标，就可以将其添加到单个形状中，该形状管理目标之间的重绘连接。