rotation - EaselJS - 围绕其中心旋转形状

Question

我正在用 EaselJS 制作一个旋转矩形，但它不像我想的那样工作。

我认为，如果我想制作一个围绕其中心在 x=100, y=100 位置旋转的正方形 (40x40)，我需要将它的注册点设置为 regX=20, regY=20。

//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRect(100, 100, 40, 40);
circle.regX = circle.regY = 20;
//Add Shape instance to stage display list.
stage.addChild(circle);

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

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

http://jsfiddle.net/ZbZjL/14/

Answer 1

您在形状内的点 100, 100 处绘制矩形，然后将注册点设置为 20, 20，这意味着您正在从(或多或少)一个点旋转一个巨大的形状，它的一个角有一个矩形在对面的角落。
在下面，我在新形状的原点绘制矩形，然后使用 x 和 y 属性放置形状本身:

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

circle.x = circle.y = 100;

//Add Shape instance to stage display list.
stage.addChild(circle);

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

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

见 fiddle .