EaselJS - 如何使一个形状绕其中心旋转

Question

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

我的想法是，如果我想制作一个边长为40的正方形，并使其围绕其中心点在x=100，y=100处旋转，那么我需要将它的注册点设置为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/

- Thịnh Phạm

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();
}

请参见代码片段。

- net.uk.sweet

---

谢谢。我误解了drawRect(x，y，w，h)方法。x，y不是circle.x和circle.y。 - Thịnh Phạm

通过这个例子，我发现正确旋转矩形的关键在于区分嵌套在形状对象中的形状 DisplayObject 和矩形 Rectangle。两者都有自己的 x、y、宽度和高度。只有形状 DisplayObject 有一个注册点。围绕此注册点旋转矩形需要将矩形中心点与 DisplayObject 注册点对齐。这可以通过在 DisplayObject 中的 x:0, y:0 点处绘制矩形来完成。 - Pim Schaaf

建议：将旋转的矩形标记为“圆形”，可能会令某些读者感到困惑。也许在这个例子中，将Rotating(旋转)作为形状显示对象的变量名称会更加准确。 - Pim Schaaf