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.
3.149.28.126