VMLのツール紹介・関連サイト・shapeエレメントのサブエレメントであるpathのいくつかと楕円コマンドなど。

VMLの考察１---間違いがある場合はご容赦を（できれば教えてくださいませ）。

[はじめに]

参考サイト一覧

VML Reference（MSDN)：http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/SHAPE/introduction.asp（英語）

VMLとTIMEのお部屋（のほほん気分なHP)：http://www5b.biglobe.ne.jp/~bichan/vml/vml.htm（日本語--実践的解説)

他

[ツール紹介]

VML【WORD】での　ロゴの作り方：http://5.pro.tok2.com/~ayanaotakashun/kouza/onepoint/018/one018.htm（雛形倶楽部ワンポイントレッスンより）

VMLのパスを得たり、VML図形の確認に便利なツールを紹介しておきます。どちらも”あやなおたかしゅん”さんの好意により提供されています。

VML ベクトル図形作成ツール：http://5.pro.tok2.com/~ayanaotakashun/sample/vml1/vml1_d.htm

VML タグ形状確認ツール：http://5.pro.tok2.com/~ayanaotakashun/kouza/onepoint/010/one010.htm

作成ツールで一旦「全消去」を行い、原点を調整してから、「汎用的な形（shape）＆パス（path）」を選択してタグをコピーし、確認ツールに貼り付けます。具体的な作成例はVML 作成ページを参照ください。
<v:shape strokecolor="black" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65 0 65 50 100 25 160 80 120 135 160 110 100 160 65 100 65 x e">
</v:shape>がデフォルトで表示されると思います。１単位１ピクセルになってます。
サブパスを削除してpath=""状態にしておいてから作成ツールに戻り、四角形や楕円など図形を作成し、pathの部分のみをコピーして確認ツールのpath=""内にサブパスとして貼り付けます。xコマンドやeコマンドを適宜削除・付加しながら、サブパスをつなげていき、確認することが可能です。描画位置が悪くて確認できない場合は、leftとtopを修正すればいいです。塗りつぶしを確認したい場合はfillcolor="#ffcccc"など塗りつぶし色を白以外にしておくといいでしょう。VML形状確認ツールの背景が白のため、これを追加しないと目で見ることができません。

例：
<v:shape strokecolor="black" fillcolor="#ffcccc" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x e">
</v:shape>・・・線が黒の1ピクセル、塗りつぶしは淡いピンクで★が描画されます。

サブパスやパスについて「閉じる」「閉じない」「閉じている」「閉じていない」「開いている」など表現しているところがあります。
連結されたパスの開始点と終了点が同じ場合は閉じているパスで、これをクローズドパスと言います。
パスの開始点と終了点が異なる場合は開いているパスで、これをオープンパスと言います。

クローズドパスの例
<v:shape strokecolor="black" fillcolor="#ffcccc" filled="true" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 50 50 l 100 100 150 50 200 100 250 50 300 100 400 0 x e">
</v:shape>・・・塗りつぶしあり

複数の直線で連結しているパスであるが、xコマンドにより閉じられる。つまり終点座標は(400,0)ではなく、(50,50)が本質的には正しい。
このサブパス描画後の現在位置は(50,50)になるべきということ（実際には現在点は消失する）。
※注意しなければならないのは、xコマンドで閉じた場合、次にサブパスを開始するには新たに開始点を示さなければならない点。
続けてcやlコマンドでパスをつけても描画されない。"x c"や"x l"は駄目と言うことだ。xの前の座標がcやlの開始点にならないので注意！また前のサブパスの開始点がcやlの開始点にもならない。

オープンパスの例
<v:shape strokecolor="black" filled="false" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 50 50 c 50 100 100 100 100 50 100 0 150 0 150 50 150 100 200 100 200 50 e">
</v:shape>・・・塗りつぶしなし

複数の３次ベジエ曲線を連結しているパスであり、開始点と終了点が異なりxコマンドで閉じてもいないので開いたままになっている。このサブパス描画後の現在位置は(200,50)になる。

shapeのpathについて

・OutlookExpressにVMLを使用すると、座標区切りが半角スペースからコンマ(",")となったり、"x wa"は"wrになったりが起こりますが、意味的には同じことなので問題ありません。"x wa"はxにより前のサブパスが閉じられるためwaで楕円を描く場合にwrで楕円を描くのと同等になることのようですが、ちょっと違うような気がします。"x"コマンドが無い場合は閉じられないので、"wa"と"wr"の意味合いが変わってきます。"wa"は前のサブパスに引き継いで楕円を描きますが、"wr"は前のパスとは別に新たに楕円を描きます。"x wa"は"wr"に書き換えられるのも納得ですね。”x at"も"ar"に書き換えられます。他にもOEではstrokeweightがピクセルではなくポイントに変換されます。

path="サブパス サブパス 〜〜"のように一つのshapeに複数のサブパスを記述して汎用図形を書き連ねることができます。
サブパスはコマンドと座標を用いて図形を描きます。

コマンドについてはhttp://www.doraneko.org/misc/vml/19980513/Overview.html#_Toc416858391を参照ください。

円弧を描くサブパス(wa wr at ar)

※画像はVMLではありません。

xc=(x1+x2)÷2、yc=(y1+y2)÷2。x1 x2 x3 x4 y1 y2 y3 y4は整数でなければならない（小数部分は切り捨てられる）。

試しに小数点使用すると（1単位2ピクセル）
<v:shape strokecolor="black" stroked="t" fillcolor="red" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="80 80" coordorigin="0 0" path="wa 200 200 400 400 200 200 200 200.9"></v:shape>

<v:shape strokecolor="black" stroked="t" fillcolor="red" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="80 80" coordorigin="0 0" path="wa 200 200 400 400 200 200 200 200"></v:shape>
と同じになります。

"wa x1 y1 x2 y2 x3 y3 x4 y4 x"
"wr x1 y1 x2 y2 x3 y3 x4 y4 x"
x1<x2、y1<y2は絶対条件。弧は時計回りに描かれます。即ち次のようになります。
※stroked="t"・・・true（線が描画される）、stroked="f"・・・false(線は描画されない）
xコマンドにより終点は始点と直線で結ばれる。一つ前のサブパスが閉じられていない場合、前のサブパスとwaのサブパスはつながりを持つため、一つの図形を形作る。前のサブパスによる描画開始点とwaの描画終了点が直線で結ばれ、前のサブパスの描画終了点とwaの描画開始点は直線で結ばれ、塗りつぶされる。wrの場合は新たなサブパスで描画を開始するため、直線で結ばれることはないが、eコマンドが無いので、重なり合う部分は切り抜かれる。詳しくは後述します。

※円弧の開始点と終了点を結ぶ直線を弦といいます。

※画像はVMLではありません。

ベクトルは本来方向と大きさを表す概念であるが、ここでは角度を得るために指定されるのであって大きさは問題にならない。
c(xc yc)は長方形（楕円）の中心点で、ベクトルは方向のみ示せばよい。大きさは関係ないため、開始角を示すための座標は(a*x3 a*y3)、終了角を示す座標は(b*x4 b*y4)であってもよい。開始角を示すための座標は(a*(x3-xc)+xc,a*(y3-yc)+yc)、終了角を示す座標は(b*(x4-xc)+xc, b*(y4-yc)+yc)であってもよい。・・・但し、a>0且つb>0

例として中心がC(15,-10)の場合、P3(x3,y3)=(5,-8)としても、P3(x3,y3)=(-5,-6)としてもCP→のベクトル方向は同じである。
(15,-10)、(5,-8)、(-5,-6)は同一直線上に並ぶ。(15,-10)→(5,-8)と(15,-10)→(-5,-6)は同じ方向を示す。
ベクトルを示す表示方法ないのかな？CPの上に→付けたいのだけど・・・。

"at x1 y1 x2 y2 x3 y3 x4 y4 x"
"ar x1 y1 x2 y2 x3 y3 x4 y4 x"
x1<x2、y1<y2は絶対条件。弧は反時計回りに描かれます。即ち次のようになります。
※stroked="t"・・・true（線が描画される）、stroked="f"・・・false(線は描画されない）
xコマンドにより終点は始点と直線で結ばれる。 

※画像はVMLではありません。

単に楕円を描くだけなら・・・ほぼ完全な楕円（楕円サイズによっては終了ベクトルと開始ベクトルの角度差が大きくなることもありますが、想定内でしょう？？？・・・意味不明。大きく楕円形が崩れることはないという意味です。）
要するに外接する四角形の座標を利用するんです。

wa、wrの場合、path="wa x1 y1 x2 y2 x3 y3 x4 y4"或いはpath="wr x1 y1 x2 y2 x3 y3 x4 y4"とした場合、x3=x1、y3=y1、x4=x1、y4=y1+1とすれば楕円になります。x3=x1、y3=y1、x4=x1-1、y4=y1としてもOKです。他にも簡単な座標計算はありますが。
例）path="wa 15 35 45 90 15 35 15 36"

at、arの場合、path="at x1 y1 x2 y2 x3 y3 x4 y4"或いはpath="ar x1 y1 x2 y2 x3 y3 x4 y4"とした場合、x3=x1、y3=y1、x4=x1+1、y4=y1とすれば楕円になります。x3=x1、y3=y1、x4=x1、y4=y1-1としてもOKです。他にも簡単な座標計算はありますが。
例）path="aｔ 15 35 45 90 15 35 16 35"

※<x4 y4)=a*(x3 y3) x4=a*(x3-xc)+xc,y4=a*(y3-yc)+ycとすると描画されないので注意！(a>0)・・・開始点ベクトルと終了点ベクトルとの方向角が同じになるため角度差が0になる。弧の描画開始点と描画終了点が同じになるため。
コンパスで円を描く時にクリンと回して描きますが、回さないと円弧が描けないのと同じ。角度差が非常に小さい場合もほとんど回さなかったに同じなので弧としては見えないことがあります（弧の長さが1ピクセル以下になる場合など）。

次はx e コマンドを付ける付けないで、サブパスの連結がどう行われるかを見ていきたいと思います。
waとwrと（atとarと）で前後のサブパスとどうつながるのか、なども実際にVMLで描画して調べていきたいと思います。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 wa 200 200 400 400 10 10 400 400"></v:shape>

xコマンドなし。★は閉じられず、円弧の描画と連結される。星と円弧は閉じられていないひとつのサブパスを形成する。

waコマンドをwrコマンドに変えてみましょう。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 wr 200 200 400 400 10 10 400 400"></v:shape>

星は閉じられませんが、円弧は黙示的なmコマンドにより現在位置を変えて新たに描画されます。次のx waとの違いにも注目してください。
mコマンドは現在座標を変えるだけでパスを形成しないため、mコマンドで移動後の座標と移動前の座標が直線で結ばれることはない。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x wa 200 200 400 400 10 10 400 400"></v:shape>

 xコマンドで★を閉じてみる。星は開始点と終了点が直線で結ばれ線も描画される。円弧は星と直線で結ばれない。円弧にxコマンドが無いので閉じられず、円弧の描画開始点と描画終了点は直線で結ばれない。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x wa 200 200 400 400 10 10 400 400 x"></v:shape>

上と同じだが、最後にxコマンドを追加してみる。円弧も閉じられたサブパスとなるため円弧の描画開始点と描画終了点は直線で結ばれる。

次に重ねた場合

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 wa 20 20 100 100 10 10 100 100"></v:shape>

xコマンドなし。★は閉じられず、円弧の描画と連結される。星と円弧は閉じられていないひとつのサブパスを形成する。
重なった部分は切り抜かれる。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 x wa 20 20 100 100 10 10 100 100"></v:shape>

 xコマンドで★を閉じてみる。星は開始点と終了点が直線で結ばれ線も描画される。円弧は星と直線で結ばれない。円弧にxコマンドが無いので閉じられず、円弧の描画開始点と描画終了点は直線で結ばれない。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 x wa 20 20 100 100 10 10 100 100 x"></v:shape>

上と同じだが、最後にxコマンドを追加してみる。円弧も閉じられたサブパスとなるため円弧の描画開始点と描画終了点は直線で結ばれる。
重なった部分は切り抜かれる。 

eコマンドでサブパスを独立させる。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 e wa 20 20 100 100 10 10 100 100"></v:shape>

xコマンドなし。★は閉じられないが、円弧の描画と独立する。
重なった部分は切り抜かれない。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 x e wa 20 20 100 100 10 10 100 100"></v:shape>

xコマンドで星を閉じる。★は円弧の描画と独立する。円弧のパスは閉じられない。
重なった部分は切り抜かれない。 

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 x e wa 20 20 100 100 10 10 100 100 x"></v:shape>

上と同じだが、最後にxコマンドを追加してみる。xコマンドで星を閉じる。★は円弧の描画と独立する。円弧も閉じられたサブパスとなるため円弧の描画開始点と描画終了点は直線で結ばれる。
重なった部分は切り抜かれない。 

eコマンドはそれまでのサブパスを終了させ、以降のサブパスを独立させて描画開始すると考えればいいだろう。
サブパスとサブパスの間にeコマンドがあれば切り抜くことはできないので注意されたし。

xコマンドはサブパス（複数のサブパスで構成された場合も）の開始点と終了点を直線で結んで閉じ、直線を描画する。

例えば星と円弧をひとつのサブパスのように扱い、このサブパスを閉じると次のようになる。
★形成のサブパスは単独で閉じずに、円弧とつなげて閉じてみる。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 80 0 l 60 65  0 65  50 100  25 160  80 120  135 160  110 100  160 65 100 65 wa 200 200 400 400 10 10 400 400 x"></v:shape>

どうだろうか。星のサブパス開始点と円弧のサブパス終了点は直線で結ばれ、線として表示されている。

mコマンドで現在位置を変えてみよう。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 m 30 50 m 250 10 m 70 0 x e"></v:shape>

これはパスが無いので何も表示されない。しかしコンテンツは箱型になっている。[Ctrl]+[A}をしてみてください。
160px×160pxのボックス。

では直線lコマンドで結んでみる。mコマンドにより(30,50)=>(250,10)と現在位置が移動しているのが分かる。
mは現在地を変更し新たなサブパスを開始する。新たなサブパスになるため塗りつぶされないのが分かる。
途中にeコマンドが無く、最後のxコマンドにより終了点(70,0)と開始点(0,0)は直線で結ばれる。
mコマンドはサブパスをエンドすることにはならない（前のサブパスも閉じられない）。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 30 50 m 250 10 l 70 0 x e"></v:shape>

mコマンドはサブパスをエンドすることにはならない（前のサブパスも閉じられないが移動した座標と前のサブパス終了点とは連結しない）。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 30 50 20 10 m 250 10 l 70 0 x e"></v:shape>

現在位置を前のサブパス終了点から移動しない場合は、mコマンドを必要としない。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 c 30 50 60 30 100 10 l 70 0 x e"></v:shape>

円弧の場合は描画終了点座標が分かりにくい（計算を必要とする場合が多い）ので、直線の描画開始座標の把握が難しい。
下記の場合、直線は始点が(30,50)にはならない。円弧の描画終了点であることに注意！

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wa 0 0  30 50 0 0 30 50 l 70 0 x e"></v:shape>

次のはmコマンドで新たなサブパス開始にしないで、lコマンドで直線をつなげた場合。
lコマンドは現在位置から与えられた座標に直線を引く。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 30 50 l 250 10 l 70 0 x e"></v:shape>

次のも同じ。直線は連結する。同じコマンドが続く場合、コマンドは省くことができる。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 30 50 250 10 70 0 x e"></v:shape>

mコマンドの連続。これはパスが無いので何も表示されない。しかしコンテンツは箱型になっている。[Ctrl]+[A}をしてみてください。
160px×160pxのボックス。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 30 50 250 10 70 0 x e"></v:shape>

waコマンドの連続。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wa 0 0 50 30 0 0 0 10 100 100 150 180 100 100 100 120"></v:shape>
青は左の楕円のサブパス、茶は右の楕円のサブパス。xコマンドで閉じていないし、eコマンドも無いので二つ目の楕円の描画開始点と一つ目の楕円描画終了点が直線で結ばれ表示される。二つ目の楕円の描画終了点と一つ目の楕円描画開始点が直線で結ばれ表示される。

では次の場合は？

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wa 0 0 50 30 0 0 0 10 wa 100 100 150 180 100 100 100 120"></v:shape>

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wr 0 0 50 30 0 0 0 10 wr 100 100 150 180 100 100 100 120"></v:shape>

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wa 0 0 50 30 0 0 0 10 m 50 50 wa 100 100 150 180 100 100 100 120"></v:shape>

重ねると？

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wa 0 0 50 30 0 0 0 10 wa 10 10 60 40 0 0 0 20"></v:shape>

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="3" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="wr 0 0 50 30 0 0 0 10 wr 10 10 60 40 0 0 0 20"></v:shape>

こういう場合はどうなるの？って・・・

[1」filled="true"であるshapeのpath内で、サブパスの塗りつぶしをなくす方法・・・同じパスを重ねるだけ。nfコマンドで特定の独立したサブパスだけを塗りつぶさないこともできます。これについてはVML 考察2で解説します。VML作成でも少し触れています。

例として楕円を透過させる。

同じサイズの楕円を同じ位置に描画させる。切り抜きは塗りつぶしだけに起こるので、線は重なっていても消えない。
塗りつぶしありだが、切り抜かれている。

<v:shape strokecolor="black" filled="true" fillcolor="#ffccff" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="80,80" coordorigin="0 0" path="wr 50 50 100 70 0 0 0 1 wr 50 50 100 70 0 0 0 1 x e">
</v:shape>

参考：nfコマンドを使うと、<v:shape strokecolor="black" filled="true" fillcolor="#ffccff" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="80,80" coordorigin="0 0" path="wr 50 50 100 70 0 0 0 nf x e">