0,0 の中心 X、Y を中心にグラフを作成しています。レンダリングするときは、translate で再配置し、scale を使用してグラフをキャンバスに合わせます (たとえば、すべてを 50% 拡大します)。
スケールを呼び出してから変換するか、変換してからスケールするかが重要であることに気付きましたが、私はそれを理解することができません。すべてが常に適合するとは限らないため、これは問題ですが、私のメンタル モデルは完全ではないため、修正するのに苦労しています。
scale と translate 呼び出しの順序が重要な理由を誰か説明できますか?
それでは、300x300 のキャンバスにグリッドを描画してみましょう:
http://jsfiddle.net/simonsarris/4uaZy/
これで十分です。特にない。赤い線は、原点が (0,0) を通り、非常に遠くまで伸びていることを示しているため、翻訳すると何かが見えます。ここでの原点は、赤い線が (0,0) で交わる左上隅です。
以下のすべての変換は、グリッドを描画する前に行われるため、グリッドを移動します。これにより、オリジンに何が起こっているかを正確に確認できます。
それでは、キャンバスを 100,100 だけ変換して、下 + 右に移動します。
http://jsfiddle.net/simonsarris/4uaZy/1/
これで、赤い X が中心になる原点が翻訳されました。原点は現在 100,100 です。
次に、変換してからスケーリングします。原点が最後の画像と同じ場所にあることに注意してください。すべてがちょうど 2 倍の大きさです。
http://jsfiddle.net/simonsarris/4uaZy/2/
ブーム。原点はまだ 100,100 です。しかし、すべてが2倍に膨れ上がっています。原点が変わり、すべてが盛り上がった。
では逆に見てみましょう。今回は最初にスケーリングするため、最初からすべてがファットです。
http://jsfiddle.net/simonsarris/4uaZy/3/
すべてが 2 倍になります。原点は 0,0 で、その開始点です。
次に、スケールを実行してから変換します。
http://jsfiddle.net/simonsarris/4uaZy/4/
まだ 100,100 移動していますが、原点は実際のピクセルで 200,200 移動しています。これを前の 2 つの画像と比較してください。
これは、追加の変換を含め、スケールの後に発生するすべてのことをスケールする必要があるためです。したがって、スケーリングされたキャンバスで (100,100) だけ変形すると、キャンバスは 200, 200 移動します。
ここで覚えておくべき重要なことは、変換を変更すると、それ以降の描画方法 (または変換方法) に影響するということです。x2 にスケーリングしてから平行移動すると、平行移動は x2 になります
各ステップで何が起こっているかを数学的に確認したい場合は、次のコードをご覧になることをお勧めします。
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
これは、キャンバスによって行われる変換プロセス全体を模倣し、前の変換がその後の変換をどのように変更するかを確認できます。
スケーリングと回転は原点に対して行われるため、たとえば、変換に平行移動がある場合、順序が重要になります。
良い読み物: 変換順序が重要な理由