CreateJS provides some functions to transform shapes easily on Stage. Each DisplayObject has a setTransform method that allows the transforming of a DisplayObject (like a circle).
The following shortcut method is used to quickly set the transform properties on the display object. All its parameters are optional. Omitted parameters will have the default value set.
setTransform([x=0] [y=0] [scaleX=1] [scaleY=1] [rotation=0] [skewX=0] [skewY=0] [regX=0] [regY=0])
This was taken from:
http://www.createjs.com/Docs/EaselJS/classes/Shape.html#method_setTransform
Furthermore, you can change all the properties via DisplayObject directly (like scaleY and scaleX) as shown in the following example:
displayObject.setTransform(100, 100, 2, 2);
As an instance of using the shape transforming feature with CreateJS, we are going to extend our previous example:
var angle = 0;
window.ball;
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
ball = new createjs.Shape();
ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
ball.x = 200;
ball.y = 300;
stage.addChild(ball);
function tick(event) {
angle += 0.025;
var scale = Math.cos(angle);
ball.setTransform(ball.x, ball.y, scale, scale);
stage.update(event);
}
createjs.Ticker.addEventListener("tick", tick);In this example, we have a red circle, similar to the previous example of tweening. We set the coordinates of the circle to 200 and 300 and added the circle to the stage object. In the next line, we have a tick function that transforms the shape of the circle. Inside this function, we have an angle variable that increases with each call. We then set the ballX and ballY coordinates to the cosine of the angle variable. The transforming done is similar to the following screenshot:
This is a basic example of transforming shapes in CreateJS, but obviously you can develop and create better transforming by playing with a shape's properties and values.