3

私は HTML5 キャンバスをいじっており、翻訳、スケーリング、回転を使用してキャンバス上で画像を移動する方法を実装しようとしています。

setTransform を使用して変換とスケーリングが機能しています。

canvas.getContext('2d').setTransform(a,b,c,d,e,f)

これは、適用された以前の変換を破棄してから新しいものを適用するので便利です。したがって、スケーリングなどの際に以前の状態を覚えておく必要はありません。

W3 の学校では、2 番目と 3 番目のパラメータは、最初は x と y の回転であると想定していたSkewYとSkewXであると述べられています。ただし、これらのパラメーターにいくつかの値を渡す変換を適用した後、回転していないように見えます-キャンバスが歪んでいます! （私が知っている奇妙なこと:-D）。

set transform に回転がない理由を誰か教えてもらえますか (奇妙に思えるので興味があり、スキューは私にはほとんど役に立たないようです)、また、キャンバスの中心を中心に回転する最良の方法は何ですか?setTransform同時に使う？

4

2 に答える 2

9

setTransform は 2D マトリックス (3x3) に基づいています。これらの種類の行列は 2D/3D プロジェクションに使用され、ゲームを作成するプログラマーではなく、最近では通常ゲーム エンジンによって処理されます。

これらは、少し線形代数と少し微積分 (回転用) です。

あなたはこれをあまり好きではないでしょうが、あなたがやろうとしていることは次のとおりです：

function degs_to_rads (degs) { return degs / (180/Math.PI); }
function rads_to_degs (rads) { return rads * (180/Math.PI); }

これらのヘルパー関数から始めます。私たちは度数でよく考えますが、コンピューターや数学システムはラジアンでうまく機能するからです。

次に、ローテーションの計算から始めます。

var rotation_degs = 45,
    rotation_rads = degs_to_rads(rotation_degs),

    angle_sine = Math.sin(rotation_rads),
    angle_cosine = Math.cos(rotation_rads);

次に、パラメーターのレイアウトに基づいて、次のようにします。

ctx.setTransform(scaleX, skewY, skewX, scaleY, posX, posY);

変換行列に並べ替えると、次の順序になります。

//| scaleX, skewX,  posX |
//| skewY,  scaleY, posY |
//| 0,      0,      1    |

...次の値を送信します。

ctx.setTransform(angle_cosine, angle_sine, -angle_sine, angle_cosine, x, y);
// where x and y are now the "centre" of the rotation

これにより、時計回りに回転するはずです。

限界的な利点は、最初に必要だったスケールですべてを乗算できることです (ただし、posX と posY を乗算しないでください)。

于 2012-07-22T22:40:16.270 に答える