CODEWITHSUNDEEP
canvaseaseljs
Bashevis
Bashevis

Reputation: 1565

How to reduce width of rectangle in EaselJS animation

I want to reduce the width of a rectangle every tick in an animation.

In the init() method, I initially create the rectangle with:

var graphics = new createjs.Graphics().beginFill("green").drawRect(650, 90, 280, 8);
var shape = new createjs.Shape(graphics);
stage.addChild(shape);

How can I access the width of the rectangle in tick()?

Upvotes: 0

Views: 2337

Answers (1)

Olaf Horstmann
Olaf Horstmann

Reputation: 16892

Simple answer: You can't do this directly!

There are two ways to do this:

1) Through scaleX and Tween

var tween = createjs.Tween.get(shape).to({scaleX:0.5 }, 1000);

2) Through redrawing every frame

Save an additional variable with the initial width, then subtract something from that width on every tick and redraw the rectangle with the new width.

While way 1) is probably simpler, scaling might result in blurry edges, you'd have to test that in your case.

Upvotes: 3

Related Questions