CODEWITHSUNDEEP
javascripthtml5-canvascreatejseaseljs
hussainb
hussainb

Reputation: 1296

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!!

Upvotes: 1

Views: 758

Answers (2)

Lanny
Lanny

Reputation: 11294

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.

Upvotes: 4

Tiago Marinho
Tiago Marinho

Reputation: 2216

Every time the circles move you'll need to redraw the line by clearing the old graphics instructions and creating a new one in place, without TweenJS. Notice that this will be very expensive since you'll not gain any benefits from caching.

Here's a line from coordinates {x: 20, y: 20} to {x: 40, y: 40}:

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

Now if you want to change the end points to {x: 10, y: 10} to {x: 50, y: 50} you'll need to use:

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

Remember that using line.cache(x, y, w, h); after the movement is highly recommended because it'll save the processor from drawing that line every frame unnecessarily.

Upvotes: 1

Related Questions