不同形状的不一致旋转处理

Question

下面的动画展示了EaselJS旋转形状时的不一致:

拨给我这个

星形、圆形、矩形和圆角矩形被创建并放置在相同的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;

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

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

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

结果如图所示，显示一些对象具有中心旋转，而另一些对象具有偏移旋转。

对我来说，这似乎是混乱和令人困惑的，但如果有人能帮助和纠正我看待这个问题的方式，我将不胜感激。

Answer 1

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

我已经修改了你的小提琴来调整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);

这是一个更新的小提琴:https://jsfiddle.net/lannymcnie/djdcgp9m/2/