画布图像缩放、旋转、绘图

Question

对于一个游戏项目，我使用文件名、位置、比例、旋转等属性绘制图像。

这是绘制的部分：

this.context.save();
this.context.translate(item.position.x, item.position.y);
if (item.rotation > 0) {
    this.context.rotate(item.rotation * (Math.PI / 180));
}
if (item.scale.x !== 1 || item.scale.y !== 1) {
    this.context.scale(item.scale.x, item.scale.y);
}
var width = item.imageSize.width * item.scale.x;
var height = item.imageSize.height * item.scale.y;
this.context.drawImage(this.assets.image[item.fileName], -(width / 2), -(height / 2), width, height);
this.context.restore();

（别介意奇怪的定位，不重要）

这很好用，但有一点我不明白：

可以通过两种不同的方式进行旋转和缩放：首先缩放然后旋转，或者其他方式。从逻辑上讲，人们会认为先缩放然后旋转是正确的，但由于某种原因，它只有在我先旋转然后缩放时才能正常工作。

这样做的正确方法是什么？

Answer 1

您的对象的原点在哪里？ x/y 是左上角吗？如果是这样，那可能会导致问题。

Demo Scaling Then Rotating

ctx.translate(box.x, box.y);
ctx.scale(2,2);
ctx.rotate(box.angle);

Demo Rotating Then Scaling

ctx.translate(box.x, box.y);
ctx.rotate(box.angle);
ctx.scale(2,2);

如果您注意到无论我何时执行缩放和旋转，这两个演示都可以正常工作。然而，我的原点（我翻译到的地方）位于方框的中心。

要回答（或尝试）您的问题，没有正确或错误的方法，您可以先缩放或先旋转，这实际上只是一个偏好问题。

Answer 2

“正确的方法”实际上取决于您要做什么。对您而言，这似乎是旋转然后缩放会产生您所期望的结果。

这是一个小提琴，它显示了旋转然后缩放和缩放然后旋转之间的区别：http://jsfiddle.net/HYbC7/3/

让我意想不到的是缩放然后旋转。如果你 scale(x, y) 其中 x 和 y 不相等，则旋转，那么沿 x 轴的旋转将不同于沿 y 轴的旋转，并且生成的网格将倾斜。