Search code examples
javascripthtml5-canvascreatejseaseljs

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

enter image description here

As shown in the image, there are two circles connected by a line, I can animate the circle position by createjs.Tween.get(circleOne).to({x: someCoord, y:anotherCoord},1000).

I would like to update the line end points the similar way so that when the circles animate and move their ways the line end points stay attached to the circles.

The line is made by line.graphics.beginStroke("red").setStrokeStyle(2).moveTo(20,20).

Thanks!!

Solution

  • There is a better way to do this than what @tiago suggested: Graphic Commands. You can update the values of commands that Graphics use any time by storing off the command.

    Here is a quick demo, where I tween 2 circles, and on the "update" event of the first tween, I update the line command values to the circle coordinates. http://jsfiddle.net/lannymcnie/2xoL08bx/

    Example: 

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

    You can also tween a command's properties:

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

    When a command's values change, they will draw with the new values the next time the stage is updated. You can see a list of the commands and their values in the EaselJS docs.