Question

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

我是EaselJS的新手，我对如何解决这个问题一无所知。这是我在这里遇到的结果，我无法理解它： Drawing a Line in a html5 canvas using EaselJS

Answer 1

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

关键步骤是：

在初始项目上收听mousedown
创建形状以在按下鼠标时绘制连接
在舞台上监听鼠标移动和鼠标（注意：你可以在目标上使用pressmove来使这项工作更加干净，但你不会得到额外的翻转）
在mousemove上，重绘连接。在这种情况下，我将连接放在初始目标的顶部，因此我必须抵消终点以进行补偿。我这样做是为了避免跟踪最初的目标）
在鼠标向上时，停止鼠标移动/鼠标移动，并确定释放鼠标的内容。在这种情况下，如果没有目标，我删除了连接，并重新连接了另一种颜色（并且对齐到中心）。

// 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分钟内完成。希望能帮助到你！欢呼声。

<强> [UPDATE]

在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/

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

1 个答案: