0

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()?

Bashevis
  • 1,507
  • 16
  • 21

1 Answers1

3

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.

olsn
  • 16,644
  • 6
  • 59
  • 65
  • Thanks for the answer! I want to make sure I know how to redraw every frame before I move on to tween. I tried to redraw the rectangle every frame in tick, and it works, but how do I clear the existing rectangle at the start of every tick? I tried stage.removeChild(shape) with no luck. – Bashevis Feb 20 '13 at 21:10
  • 2
    Just use `shape.graphics.clear()` to clear the existing rectangle and then then use the existing shape to draw the new one: `shape.graphics.beginFill("green").dr... ect` ( http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_clear ) – olsn Feb 21 '13 at 09:06
  • For anyone stumbling across this, there is an easier way than redrawing entirely: commands. http://blog.createjs.com/new-command-approach-to-easeljs-graphics/ – Lanny Dec 08 '15 at 18:13