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

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屋！