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

Question

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

我是EaselJS的新手,我对如何解决这个问题一无所知.这是我在这里遇到的关闭,我无法理解它: 使用EaselJS在html5画布中绘制一条线

Answer 1

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

关键步骤是:

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

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分钟内爆发出来.希望能帮助到你!干杯.

[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();

这是一个显示Graphics命令的示例(与此示例无关) http://jsfiddle.net/lannymcnie/L2tm9xdm/