CODEWITHSUNDEEP
javascripteaseljs
Tarrence
Tarrence

Reputation: 794

Rotating arc around center in EaselJS

I have an arc instantiated like this:

Var arc = new createjs.Shape();
arc.graphics.beginStroke('#6d6e71')
                .setStrokeStyle(16)
                .arc(CONSTANTS.WIDTH/2, CONSTANTS.HEIGHT/2, 250, 0 + doorPosition, Math.PI/5 + doorPosition);

And I want to rotate it around the center as if the rest of the arc were completed. It seems to rotate around the 0,0 point if the circle were contained in a rectangle when using setTransform:

arc.setTransform(0, 0, 1, 1, angle);

Any help would be appreciated.

Upvotes: 0

Views: 1160

Answers (1)

Mister D.
Mister D.

Reputation: 679

The rotation is around the (0,0) point because even if your arc is drawn at (CONSTANTS.WIDTH/2, CONSTANTS.HEIGHT/2), your shape position is still (0,0). Instead, place your shape before :

var arc = new createjs.Shape();
arc.x = CONSTANTS.WIDTH/2;
arc.y = CONSTANTS.HEIGHT/2;
arc.graphics.beginStroke('#6d6e71')
            .setStrokeStyle(16)
            .arc(0,0, 250, 0 + doorPosition, Math.PI/5  + doorPosition);

And if you just want to rotate your arc, you can just modify the "rotation" property instead of using "setTransform" :

arc.rotation = angle;

Here is an example : http://jsfiddle.net/JTqvJ/40/, hope this helps.

Upvotes: 3

Related Questions