javascript - Canvas图像缩放、旋转、绘图

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

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

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