3

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

这是绘图的部分：

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

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

这工作正常，但有一件事我不明白：

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

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

4

2 回答 2

2

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

演示缩放然后旋转

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

演示旋转然后缩放

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

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

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

于 2012-12-20T02:47:13.447 回答
1

“正确的方法”真的取决于你想要做什么。对您而言，旋转然后缩放会产生您所期望的结果。

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

对我来说出乎意料的是当你缩放然后旋转时。如果你scale(x, y)wherex和y不相等，然后旋转，那么沿 x 轴的旋转将不同于沿 y 轴的旋转，并且生成的网格将是倾斜的。

于 2012-12-20T02:56:12.537 回答