Entries
この記事が気に入ったらポチっと→
Prev【VML】Pt.3 定義済みの図形3 image
最初にも、定義済みの図形はすべてshapeで描画できると書きました。ここではshapeによる図形の描画方法を解説します。
VMLによる一般的な図形は全て、点から点へという概念が重要になります。shapeは点から点へ、どのように線を引くか、または塗りつぶすかどうかなど、全てを指定します。したがってそのパラメータは複雑になります。
例えば、簡単な折れ線
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e" />
COORDSIZE、COORDORIGINはとりあえず、width,height、0,0を指定。これらはまた後に。
重要なのはPATH属性で、
m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e
という複雑な属性値になっています。
解りやすく、2Dベクトルのxとyはコンマ、2Dベクトル同士はスペースで分けていますが、実際コンマとスペースはいずれをとっても問題ありません。
mやl、eなどのアルファベットは、コマンドといいます。
つまり、2Dベクトルはパラメータなので、コマンドとパラメータによって成り立っています。一つのコマンドにおけるパラメータはコマンドの後に指定します。
「m 0,30」 ←点(0,30)を現在点として、サブパスを開始する。
m とは、点へ動く[moveto]の頭文字です。動くだけですから、動くまでの軌跡が描画されるということはありません。動く一点を1つのパラメータで指定します。VMLではサブパスを開始すると言います。
「l 20,10 〜 100,80」←点(20,10)、…、点(100,80)を順に追って直線を描画する。(折れ線を描画する。)
l とは、点までの直線を描画する[lineto]の頭文字です。これはmと違い、軌跡が描画されます。パラメータは１つ以上あってもよく、パラメータを順に追って折れ線を作ることも出来ます。
「e」←現在のサブパスを終了する。
e とは、サブパスを終了する[end]の頭文字です。mによって開始されたサブパスを終了します。パラメータはありません。
曲線を使う
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,0 c 0,60 20,60 40,40 at 50,0 90,60 50,30 70,0 x" />
この図形は、直線、３次ベジェ曲線、弧の３つでできています。
m 0,0で点(0,0)を現在点にサブパスを開始。
「c 0,60 20,60 40,40」←現在点から終了点(40,40)まで2つの制御点(0,60)、(20,60)を使ったベジェ曲線を描画する。
c とは、曲線[curve]の頭文字です。パラメータの最後の点を終了点として、最初から最後の一つ前までのパラメータを順に制御点とします。
「at 50,0 90,60 50,30 70,0」←左上(50,0)右下(90,60)になる長方形を境界とする楕円の弧を、半径ベクトル(50,30)で定義される開始角から反時計回りに、半径ベクトル(70,0)で定義される角まで描画する。
at とは、弧を描く[arcto]の頭二文字です。楕円の境界となる長方形の左上、右下、開始半径ベクトル、終了半径ベクトルを順にパラメータとして指定します。半径ベクトルで定義される角とは、楕円の中心から(x,y)へ線を引いたときの楕円との交点よって定まる角度のことです。角度を意識するより交点を意識したほうがいいと思います。現在点から弧の始点までは自動的に直線が描画されます。また、時計回りに描画するときは、waコマンド[clockwisearcto]を同様なパラメータで使用します。
「x」←現在点からサブパスの開始点まで直線を描画し、サブパスを終了する。
x は閉じる[close]を意味します。これによってサブパスは囲われた図形になります。
（他にもありますが長くなるので次に）
最初にも、定義済みの図形はすべてshapeで描画できると書きました。ここではshapeによる図形の描画方法を解説します。
VMLによる一般的な図形は全て、点から点へという概念が重要になります。shapeは点から点へ、どのように線を引くか、または塗りつぶすかどうかなど、全てを指定します。したがってそのパラメータは複雑になります。
例えば、簡単な折れ線
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e" />
COORDSIZE、COORDORIGINはとりあえず、width,height、0,0を指定。これらはまた後に。
重要なのはPATH属性で、
m 0,30 l 20,10 20,40 40,20 40,50 60,30 60,60 80,40 80,70 100,50 100,80 e
という複雑な属性値になっています。
解りやすく、2Dベクトルのxとyはコンマ、2Dベクトル同士はスペースで分けていますが、実際コンマとスペースはいずれをとっても問題ありません。
mやl、eなどのアルファベットは、コマンドといいます。
つまり、2Dベクトルはパラメータなので、コマンドとパラメータによって成り立っています。一つのコマンドにおけるパラメータはコマンドの後に指定します。
「m 0,30」 ←点(0,30)を現在点として、サブパスを開始する。
m とは、点へ動く[moveto]の頭文字です。動くだけですから、動くまでの軌跡が描画されるということはありません。動く一点を1つのパラメータで指定します。VMLではサブパスを開始すると言います。
「l 20,10 〜 100,80」←点(20,10)、…、点(100,80)を順に追って直線を描画する。(折れ線を描画する。)
l とは、点までの直線を描画する[lineto]の頭文字です。これはmと違い、軌跡が描画されます。パラメータは１つ以上あってもよく、パラメータを順に追って折れ線を作ることも出来ます。
「e」←現在のサブパスを終了する。
e とは、サブパスを終了する[end]の頭文字です。mによって開始されたサブパスを終了します。パラメータはありません。
曲線を使う
<V:SHAPE STYLE="width:100px;height:100px;" COORDSIZE="100,100" COORDORIGIN="0,0" PATH="m 0,0 c 0,60 20,60 40,40 at 50,0 90,60 50,30 70,0 x" />
この図形は、直線、３次ベジェ曲線、弧の３つでできています。
m 0,0で点(0,0)を現在点にサブパスを開始。
「c 0,60 20,60 40,40」←現在点から終了点(40,40)まで2つの制御点(0,60)、(20,60)を使ったベジェ曲線を描画する。
c とは、曲線[curve]の頭文字です。パラメータの最後の点を終了点として、最初から最後の一つ前までのパラメータを順に制御点とします。
「at 50,0 90,60 50,30 70,0」←左上(50,0)右下(90,60)になる長方形を境界とする楕円の弧を、半径ベクトル(50,30)で定義される開始角から反時計回りに、半径ベクトル(70,0)で定義される角まで描画する。
at とは、弧を描く[arcto]の頭二文字です。楕円の境界となる長方形の左上、右下、開始半径ベクトル、終了半径ベクトルを順にパラメータとして指定します。半径ベクトルで定義される角とは、楕円の中心から(x,y)へ線を引いたときの楕円との交点よって定まる角度のことです。角度を意識するより交点を意識したほうがいいと思います。現在点から弧の始点までは自動的に直線が描画されます。また、時計回りに描画するときは、waコマンド[clockwisearcto]を同様なパラメータで使用します。
「x」←現在点からサブパスの開始点まで直線を描画し、サブパスを終了する。
x は閉じる[close]を意味します。これによってサブパスは囲われた図形になります。
（他にもありますが長くなるので次に）
0件のコメント
コメントの投稿
1件のトラックバック
[T1] 図形について
図形図形（ずけい、shape）は、一定の決まりによって定められる様々な形状のことであり、様々な幾何学における基本的な対象である。ものの視覚|視覚認識によって得られる直観的な「かたち」を、まったく感覚によらず明確な定義と公理のみを用いて、演繹的に研究する論理的な
- 2007-04-19
- 発信元 : デザインの杜
- トラックバックURL
- http://noraphp.blog73.fc2.com/tb.php/14-b06357a9
- この記事に対してトラックバックを送信する（FC2ブログユーザー）
