0

最近、キャンバス グラフィック関連の JavaScript プロジェクトやライブラリを多数目にしており、それらが座標系をどのように処理するのか疑問に思っていました。キャンバスに図形やベクトルを描くとき、​​ポイントはデカルト平面に基づいて計算され、キャンバス用に変換されますか? それとも、すべてキャンバス用に直接計算されますか?

線の交点が曲線に似てくるまで、すべての接線をグラフ化して円を描いてみましたが、慣れ親しんだデカルト平面と Web ブラウザーで使用される座標系との違いが非常にわかりにくいことがわかりました。たとえば、「y^2 + x^2 = r^2」という円の関数は、「(y-1)^2 + (x-1)^2 = r^2」に変換する必要があります。キャンバスに表示されます。そして、負の勾配はキャンバス上の正の勾配であり、すべてが逆さまになります:/ .

私が考える最も簡単な方法は、デカルト平面の原点がキャンバスの中心にあると仮定し、それに応じて座標を調整することでした。500 x 500 のキャンバスでは、中心は 250,250 になるため、ポイントが 50,50 になると、(250 + 50, 250 - 50) = (300, 200) に描画されます。

これを複雑にしすぎている気がしますが、キャンバスを操作するためのクリーンな方法に頭を悩ませることはできません。

4

2 に答える 2

2

現在の慣行は、おそらく David Flanagan の著書「JavaScript : The Definitive Guide」からの引用によって例示できます。

特定のキャンバス操作と属性 (生のピクセル値の抽出やシャドウ オフセットの設定など) では、常にこの既定の座標系が使用されます。

(デフォルトの座標系はキャンバスの座標系です)。そしてそれは続く

ほとんどのキャンバス操作では、ポイントの座標を指定すると 、デフォルトの座標系ではなく、現在の座標系[たとえば、あなたが言及したデカルト平面 @Walkerneo] のポイントと見なされます。

キャンバス cs を直接使用するよりも「現在の座標系」を使用する方が便利なのはなぜですか?

何よりもまず、それは画面に関連付けられているキャンバス自体から独立しているためです (より具体的には、デフォルトの座標系の寸法はピクセルで表されます)。たとえば、デカルト (直交) 座標系を使用すると、(もちろん、私にとっても、明らかに :-D ) 描画したいものに関して描画を簡単に指定でき、描画方法のタスクはCanvas API によって提供される変換。特に、図面の自然単位で寸法を表現し、図面をキャンバスに合わせて (場合によってはそうでなくても) 縮尺と変換を実行できます。

さらに、変換を使用すると、基本的な座標系から「遠く」取得し、より高いレベルの操作 (「スケール」、「回転」、「変換」、およびより一般的な「変換」)。上記の本は、このアプローチの力の非常に良い例を示しています.Koch (フラクタル) スノーフレークをより少ない行で描画します.

于 2013-03-13T09:10:38.170 に答える
0

HTML5キャンバスは、ほとんどのグラフィックシステムと同様に、（0,0）が左上にあり、x軸とy軸がそれぞれ左から右、上から下に移動する座標系を使用します。これは、メモリのブロックだけでグラフィックシステムを作成する方法を考える場合に意味があります。座標（x、y）をメモリスロットにマップする最も簡単な方法は、をとることx+w*yです。ここで、wは線の幅です。

これは、キャンバスの座標系が数学で使用するものと2つの点で異なることを意味します。（0,0）は通常のように中心ではなく、yは上ではなく下に成長します。最後の部分はあなたの姿を逆さまにするものです。

キャンバスに変換を設定して、座標系を以前のようにすることができます。

var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(250,250);   // Move (0,0) to (250, 250)
ctx.scale(1,-1);          // Make y grow up rather than down
于 2013-03-13T07:16:20.313 に答える