画架围绕其中心旋转形状 - 得到偏移

时间:2015-08-13 12:17:36

标签: javascript html5-canvas easeljs createjs

有人可以解释为什么当两个矩形放在同一个位置时,红色三角形会在绕中心旋转之前跳转到一个偏移量吗?

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

谢谢, 史蒂夫

1 个答案:

答案 0 :(得分:1)

应该发生的事情;通过将regX / regY值添加到旋转rect的位置来解决它。 rect1.x = rect1.y = 120; rect2.x = rect2.y = 100;