createjs，用 x1，y1 和 x2，y2 坐标动画化一条线

Question

如图所示，有两个圆由一条线连接，我可以通过createjs.Tween.get(circleOne).to({x: someCoord, y:anotherCoord},1000)来动画圆的位置。

我想以类似的方式更新线的端点，以便当圆圈动画并移动它们的方式时，线的端点保持与圆圈的连接。

线由line.graphics.beginStroke("red").setStrokeStyle(2).moveTo(20,20).

制作

谢谢！！

Answer 1

每次圆圈移动时，您都需要通过清除旧的图形指令并在适当的位置创建新的图形指令来重新绘制线条，而无需使用 TweenJS。请注意，这将非常昂贵，因为您不会从缓存中获得任何好处。

这是从坐标 {x: 20, y: 20} 到 {x: 40, y: 40} 的直线：

line.graphics.beginStroke("red").setStrokeStyle(2).moveTo(20,20).lineTo(40, 40);

现在，如果您想将终点从 {x: 10, y: 10} 更改为 {x: 50, y: 50}，您需要使用：

line.graphics.clear();
line.graphics.beginStroke("red").setStrokeStyle(2).moveTo(10,10).lineTo(50, 50);

请记住，强烈建议在移动后使用 line.cache(x, y, w, h);，因为这样可以避免处理器不必要地在每一帧绘制该线。

Answer 2

有比@tiago 建议的方法更好的方法：Graphic Commands。您可以随时通过存储 command 来更新 Graphics 使用的命令的值。

这是一个快速演示，我补间了 2 个圆圈，在第一个补间的 "update" 事件中，我将线命令值更新为圆坐标。 http://jsfiddle.net/lannymcnie/2xoL08bx/

示例：

var cmd = shape.graphics.lineTo(10,10).command;
cmd.x = 20; // Changes the x of the lineTo command that is stored off.

您还可以补间命令的属性：

createjs.Tween.get(cmd).to({x: 100, y:100}, 1000);

当命令的值发生变化时，它们将在下次更新阶段时使用新值进行绘制。您可以在 EaselJS docs.

中看到命令及其值的列表

createjs, animating a line with x1,y1 and x2,y2 coordinates