EaselJS：使用一条线连接2个容器/形状 [英] EaselJS: connect 2 containers/shapes using a line

问题描述

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

I want to be able to click on a container/shape and as I move the mouse a line that can be connected to another container/shape (with an arrow at one end) is drawn. Ideally I want this line to snap to the destination element.

我是EaselJS的新手，我不知道如何解决这个问题。这是我在这里遇到的结果，我无法理解它：
使用EaselJS在html5画布中绘制一条线

I'm new to EaselJS and I've got no clue on how to go about this. This is the closes I've come across of here, and I can't make sense out of it: Drawing a Line in a html5 canvas using EaselJS

推荐答案

这是我放在一起的快速演示

Here is a quick demo I put together

关键步骤是：

• 听取初始项目上的mousedown


• 创建一个形状以在按下鼠标时绘制连接


• 在舞台上监听mousemove和mouseup （注意：你可以在目标上使用pressmove使这项工作更加干净，但你不会得到额外的翻转）


• 在mousemove上，重绘连接。在这种情况下，我将连接放在初始目标的顶部，因此我必须抵消终点以进行补偿。我这样做是为了避免跟踪初始目标。）


• 在鼠标上移动时，停止鼠标移动/鼠标移动，并确定释放鼠标的内容。在这种情况下，如果没有目标，我删除了连接，并重新连接了另一种颜色（并且对齐到中心）。

• Listen for mousedown on the initial item
• Create a shape to draw the connection when the mouse is pressed
• Listen for mousemove and mouseup on the stage (Note: You can use pressmove on the target to make this work a little more cleanly, but you will not get additional rollovers)
• On mousemove, redraw the connection. In this case, I placed the connection on top of the initial target, so I have to offset the end point to compensate. I did this to avoid tracking the initial target)
• On mouse up, stop the mousemove/mouseup, and determine what the mouse was released on. In this case, I removed the connection if there was no target, and redrew the connection a different color (and snapped to the center) otherwise.

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分钟内完成。希望能帮助到你！
干杯。

I thought this was in interesting challenge to bang out in 15 minutes. Hope it helps! Cheers.

[更新]

在EaselJS 0.8+ ，您可以保存任何图形命令，并随时更新其值。这可以防止您不得不每帧重绘整个形状。快速示例：

In EaselJS 0.8+, you can save any graphics command, and update its values any time. This prevents you from having to redraw your whole shape every frame. Quick example:

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/

Here is a sample showing Graphics commands (unrelated to this example) http://jsfiddle.net/lannymcnie/L2tm9xdm/

这篇关于EaselJS：使用一条线连接2个容器/形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！