Search code examples
createjstweenjs

Rotate shape around the center without effecting its location

what I want to achieve here is create a shape in location x:0, y:0

and rotate the shape around its center without changing the regX and regY

is there a way to do it in CreateJS ,

i want to have the effect of moving the shape from it's top left but in the same time rotate from it's center

https://jsfiddle.net/x5nht1am/20/

shape.regX=25;
shape.regY=25;
createjs.Tween.get(shape).to({rotation: 90} , 4000)
//then at the same time
shape.regX=0;
shape.regY=0;
createjs.Tween.get(shape).to({x: 100,y:100}, 4000)

is there a way to pass the regX&Y for the tween to function to use it only on this operation?

Solution

  • EaselJS objects can't have separate pivot and registration points.

    When dealing with separate registration points (where the content is drawn from), and pivot point (where the content rotates and scales from), an easy solution is to wrap your object in a Container instance, and then manage position and rotation separately.

    var cont = new createjs.Container();
cont.addChild(myShape);

    That should help. There are definitely other approaches with Matrix math, but this is the easiest solution I can think of.

    Cheers,