CODEWITHSUNDEEP
javascripthtml5-canvaseaseljscreatejs
Steve_h
Steve_h

Reputation: 11

easeljs rotating a shape around its center - gets offset

Can anyone explain why, when both rectangles are placed in the same position, the red triangle jumps to an offset before rotating around its center?

//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
rect1 = new createjs.Shape();
rect1.graphics.beginFill("red").drawRect(0, 0, 40, 40);
rect1.regX = rect1.regY = 20;  //rotate around center
rect1.alpha = .3;

rect2 = new createjs.Shape();
rect2.graphics.beginFill("green").drawRect(0, 0, 40, 40);
rect2.alpha = .3;
// place rectangles in the same position
rect1.x = rect1.y = rect2.x = rect2.y = 100;

//Add Shape instance to stage display list.
stage.addChild(rect1,rect2);

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", onTick);

function onTick() {
    rect1.rotation++;
    stage.update();
}

jsfiddle

What regX, regY values need to be provided to keep it in place overlaying the green?

(The 2013 answer provided did not show the original position)

Thanks, Steve

Upvotes: 1

Views: 1559

Answers (1)

l_owbar
l_owbar

Reputation: 43

That's supposed to happen; work around it by adding the regX/regY values to the position of the rotating rect. rect1.x = rect1.y = 120; rect2.x = rect2.y = 100;

Upvotes: 1

Related Questions