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

(変な配置は気にしないでください、重要ではありません)

これは問題なく動作しますが、理解できないことが 1 つあります。

回転とスケーリングは、2 つの異なる方法で実行できます。最初にスケーリングしてから回転するか、またはその逆です。論理的には、最初に拡大縮小してから回転するのが正しいと考える人もいるでしょうが、何らかの理由で、最初に回転してから拡大縮小しないと正しく機能しません。

これを行う正しい方法は何ですか？

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)が等しくない場合、回転すると、x 軸に沿った回転は y 軸に沿った回転とは異なり、結果のグリッドは歪んでしまいます。xy

于 2012-12-20T02:56:12.537 に答える