javascript - easeljs 围绕其中心旋转形状 - 获得偏移

Question

任何人都可以解释为什么当两个矩形放置在同一位置时，红色三 Angular 形在绕其中心旋转之前会跳到一个偏移位置？

//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

需要提供哪些 regX、regY 值才能将其保持在覆盖绿色的位置？

(提供的2013年答案没有显示原来的位置)

谢谢，史蒂夫

Answer 1

这应该会发生；通过将 regX/regY 值添加到旋转矩形的位置来解决此问题。 rect1.x = rect1.y = 120; rect2.x = rect2.y = 100;