パス

パス

polygon や polyline 要素を使って多角形や折れ線を描くことができました。
path 要素を使うと曲線も同様にして描くことができます。 一部分が折れ線で一部分が曲線のようなものも可能です。
polygonのように最初の点と最後の点が結ばれた曲線を閉曲線polylineのように最初の点と最後の点が別々の曲線を開曲線と呼びます。

path 要素

パスの記述部分には、コマンド(命令)と座標を表す数を並べて書きます。

タートルグラフィックスの考え方を用います


M コマンド (move to)

現在位置を (x, y) に移動します。

パスデータは必ずMコマンドで始まります。 パスデータの途中にMコマンドがあると、いくつかの部分に分かれたパスができます。複合パスに対応します。

L コマンド (line to)

もとの現在位置と (x,y) の間を直線で結び、現在位置を (x, y) に移動します。

Z コマンド (close)

現在位置と最初の点を直線で結びます。

パスデータの最後にZを記述すると閉曲線(polygon)になり、Zの記述が無いときは開曲線(polyline)になります。

したがって、つぎのpolygon要素と同じ結果が得られます。

ここまでなら polygon のほうが楽かもしれませんが、pathを使うともっと複雑な図形を描くことができます。


絶対座標と相対座標

lineto命令として小文字の l を使い

と書くと、座標(10,20)からx方向へ20、y方向へ10進んだ座標すなわち(50,30)への直線と、 座標(50,30)からx方向へ30、y方向へ -40進んだ座標すなわち(80,70)への直線からなる折れ線が描かれます。


省略記法

水平線、垂直線を引くための命令も用意されています。

曲線


3次ベジェ曲線命令

CGでは三次ベジェ曲線がよく使われます。ツールを使って描かれる曲線のほとんどはこれです。

4点 P0, P1, P2, P3 が与えられたとき、曲線上の点 P は t をパラメータとして

と書けます(0≦t≦1)。

この曲線はつぎのような形になります。

C命令では、現在位置がP0に、(x1,y1)がP1に、(x2,y2)がP2に、(x,y)がP3に対応します。

の場合、P0=(10,50), P1=(20,25), P2=(40,25), P3=(50,60)に対応し P1,P2を制御点とするP0からP3への曲線になります。


2次ベジェ曲線命令

3点 P0, P1, P2 が与えられたとき、曲線上の点 P は t をパラメータとして

と書けます(0≦t≦1)。

Q命令では、現在位置がP0に、(x1,y1)がP1に、(x,y)がP2に対応します。

の場合、P0=(10,50), P1=(20,25), P2=(50,60)に対応し P1を制御点とするP0からP2への曲線になります。


2次ペジェ曲線のデータを書く

曲線の端点p0とp2の座標は考えられますね。 次にそれら2点からのばした接線の交点をp1とすればよいのです。 曲線の曲がり具合は、p0,p1の中点とp1,p2の中点を結ぶ線に接する程度と考えるとよいでしょう。


補足

曲線命令も直線命令と同様に続けて書いたり、直線と曲線をつなげて描いたりすることもできます。 絶対座標、相対座標についても同じです。 また、

もあります。

パス (最終更新日時 2008-08-21 12:21:32 更新者 masahiko)