Question

对于游戏项目，我使用其属性（如fileName，position，scale，rotation）绘制图像。

以下是绘图的部分：

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

＆＃34;正确的方式＆＃34;真的取决于你想要做什么。对你而言，似乎是旋转然后缩放结果符合你的期望。

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

当我缩放然后旋转时，我意想不到的是什么。如果scale(x, y) x和y不相等，则旋转，则沿x轴的旋转将不同于沿y轴的旋转，结果网格将歪斜。

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

2 个答案: