javascript - easyljs围绕其中心旋转形状-获取偏移

谁能解释为什么当两个矩形都放置在同一位置时，红色三角形在绕其中心旋转之前跳到一个偏移量吗？

//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年提供的答案未显示原始位置）

谢谢，
史蒂夫

最佳答案

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