javascript - CreateJS EaselJS - 不同形状的旋转处理不一致

Question

这是一个 fiddle 动画，显示了 EaselJS 旋转形状的方式的这种不一致:

fiddle me this

创建星形、圆形、矩形和圆 Angular 矩形并将其放置在完全相同的 x,y 位置

    rect.x = star.x = circle.x = rrect.x = stage.canvas.width  / 2;
    rect.y = star.y = circle.y = rrect.y = stage.canvas.height / 2;

然后它们在刻度循环中以完全相同的方式旋转:

rect.rotation = circle.rotation = rrect.rotation = star.rotation += 1;

所有形状都具有相同的 regX 和 regY 值(零)。

结果，如 fiddle 中所示，显示了一些具有居中旋转的对象和其他具有偏移旋转的对象。

对我来说，这看起来很困惑和令人困惑，但如果有人可以帮助并纠正我看待这个问题的方式，我将不胜感激。

Answer 1

这只是由于 Canvas API 的工作方式所致。矩形和圆弧从左上角绘制，而圆形和多星形从中心绘制。

我已经修改了你的 fiddle 来调整 regX 和 regY (就像你未使用的 rect1 形状一样)。绘制左上角形状时，您还可以调整负数的 x/y。

// Offset your regX/Y
shape.graphics.beginStroke("#00f").drawRect(0,0,40,40);
shape.regX = shape.regY = 20;

// Offset your draw operations' center point. This is my usual approach
shape.graphics.beginStroke("#f00").drawRect(-20,-20,40,40);

这是更新的 fiddle :https://jsfiddle.net/lannymcnie/djdcgp9m/2/