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

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

这是一个快速演示，我在2个圈子之间，以及＆＃34;更新＆＃34;第一个补间的事件，我将行命令值更新为圆坐标。 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。

中查看命令及其值的列表

Answer 2

每次圆圈移动时，您都需要通过清除旧图形说明并在没有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);，因为它会使处理器不必每帧都画出该行。