HTML 5キャンバスの理解とスケッチの翻訳

Question

私は0,0の中心X、Yの周りにグラフを描いています。レンダリングが終わると、translateで位置を変更し、スケールを使用してグラフをキャンバスに塗りつぶします（つまり、すべてを50％スケールします）。

スケールを呼び出して翻訳したり、翻訳してから拡大縮小したりしても、私はそれを気にすることができません。これは問題があります。なぜなら、すべてが必ずしも適合しないからです。私のメンタルモデルは完全ではないので、それを修正するのは難しいです。

誰かがスケールの順序と呼び出しを変換する理由を説明できますか？

Answer 1

それでは、300×300キャンバスにグリッドを描画してみましょう：

http://jsfiddle.net/simonsarris/4uaZy/

これが行います。特にない。赤い線は（0,0）を通って非常に遠くまで伸びることによって原点がどこにあるかを示しています。それで翻訳すると何かが見えます。ここの原点は左上隅で、赤い線は（0,0）で出会う。

グリッドを描画する前に以下のすべての翻訳が行われるため、グリッドを移動します。これは、あなたが起きていることを正確に見ることができます。

---

だから、右の+、それを下に動かし、100100でキャンバスを翻訳することができます：

http://jsfiddle.net/simonsarris/4uaZy/1/

だから我々は、赤いXがどこであるの原点を、翻訳しました中心に置かれた。元は100,100になりました。

---

これで翻訳してからスケールします。原点が最後の画像と同じ場所にあることに注目してください。すべてがちょうど2倍の大きさです。

http://jsfiddle.net/simonsarris/4uaZy/2/

ブーム。 orginはまだ100,100です。しかし、すべてが2で膨らんだ。起源が変わった、そしてすべてがうまくいった。

---

ここでそれらを逆に見てみましょう。今回は第1のスケールなので、すべてが最初から太っている：

http://jsfiddle.net/simonsarris/4uaZy/3/

すべては、原点は、0,0にその出発点である2によりパフれます。

---

ここでスケールを作成して翻訳します。

http://jsfiddle.net/simonsarris/4uaZy/4/

我々はまだ100100で翻訳していますが、起源は、実際のピクセルで200200で移動しています。これを前の2枚の画像と比較する。

これは、スケールの後に起こるすべてのものが、追加の変換を含めて、スケールがであるためです。だから、200は、ここで覚えておくべき持ち帰り事が変換を変更すると、物事が描かれている方法に影響を与えるということである（または形質転換は！）そして、上から

---

、スケールキャンバスは200で動くことにつながる上（100100）によって変換します。

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

：あなたはX2をスケーリングして、翻訳した場合、変換はあなたが見たい場合は

は、数学的に、各ステップで何が起こっているのか、私はここにコードを見てみることをお勧め×2となります

これは、キャンバスによって行われた変換プロセス全体を模倣し、以前のトランスフォームが後で変換されるものをどのように変更するかを見ることができます。

Answer 2

拡大縮小と回転は原点に対して行われるため、変換に変換がある場合などは、これで順序が重要になります。相続人

良い読み物： Why Transformation Order Is Significant