shapeエレメントのサブエレメントであるpathのコマンドを見てみる

m l c x e t r v nf ns ae at_ar_wa_wr qx qy qb

aeとalはようわからんぴょーん

VMLの考察２---少しshape pathのコマンドを見て行きたいと思います。

※strokecolor・・・パスの色、stroked・・・パスを描画するかどうか(true/false)、strokeweight・・・パスの線幅(通常ピクセル/ptなども可能で、座標単位に関わらない）、fillcolor・・・パスの内部を塗りつぶす色、filled・・・塗りつぶしするかどうか(true/false)   tはtrue、fはflaseに同じ。

mコマンド(moveto)

m x y・・・(moveto)・・・現在点を(x,y)に移動し、新しいサブパスを開始する。mコマンドではパスを形成しない。
直前のサブパスを閉じることも終了することもしない。直前の座標と(x,y)を直線のパスとすることもない。座標が飛ぶ感じ。

<v:shape strokecolor="black" fillcolor="red" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m -25 0 at 0 0 50 50 50 20 50 30 m 75 0 at 100 0 150 50 150 20 150 30 m 175 0 at 200 0 250 50 250 20 250 30"></v:shape>・・・左のとんがっている先端部がmで移動した座標

※path="で現在点は未定義状態であるため、必ずパスの開始時には現在点あるいは開始点を示す必要がある。
path="c 50 33 100 -50 0 0 0 1"とはできない。初期値(0,0)を持っていると錯覚しないこと。

lコマンド(lineto)

l x1 y1 x2 y2 x3 y3 〜xn yn・・・(line)・・・現在点から(x1,y1),(x2,y2),(x3,y3)〜(xn,yn)と次々に直線のパスを連結形成する。現在点は(xn,yn)に移る。

<v:shape strokecolor="black" filled="f" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 m 200 0 l 200 100 300 0 400 100 500 0"></v:shape>

cコマンド(curveto)

c x1 y1 x2 y2 x3 y3・・・(curve)・・・現在点から(x1,y1)と(x2,y2)とを制御点とし、終点を(x3,y3)とする３次ベジエ曲線のパスを形成する。現在点は(x3,y3)に移る。曲線は連結することも可能。c x1 y1 x2 y2 x3 y3 X1 Y1 X2 Y2 X3 Y3 〜はc x1 y1 x2 y2 x3 y3 c X1 Y1 X2 Y2 X3 Y3 〜と同等。

<v:shape strokecolor="black" filled="f" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 c 0 -30 50 -30 50 0 m 200 0 c 200 30 250 30 250 0 250 -30 300 -30 300 0"></v:shape>

mをつけないとどうなるか？現在点は明示しなければならないようだ（エレメントに現在点初期値が存在しないことを示している）。

<v:shape strokecolor="black" filled="f" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="c 0 -30 50 -30 50 0 c 200 30 250 30 250 0 250 -30 300 -30 300 0"></v:shape>

xコマンド(close)

x・・・(close)・・・サブパスを閉じてクローズドパスにする。閉じるとは現在点からサブパスの元の開始点へと直線のパスを引くこと。
前のページで現在点は前のサブパスの開始点になるのが本質的に正しいと書いたが、閉じられると現在点を失うように振舞う。
新たなサブパスを開始するには開始点を示さなければならない。xコマンドによる場合も後続のサブパスの現在点は未定義状態になる。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 c 0 -30 50 -30 50 0 m 200 0 c 200 30 250 30 250 0 250 -30 300 -30 300 0 300 60 150 60 150 0 x c 100 -100 200 -100 200 -50"></v:shape>・・・青い部分の曲線は開始点を示していないため、表示されない。

次のようにしなければならない。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 c 0 -30 50 -30 50 0 m 200 0 c 200 30 250 30 250 0 250 -30 300 -30 300 0 300 60 150 60 150 0 x  m 150 0 c 100 -100 200 -100 200 -50"></v:shape>

同じようでもwaなどは開始点（と呼ぶべきではないかもしれないが）を指定するようになっているので、次のようにして構わない。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 c 0 -30 50 -30 50 0 m 200 0 c 200 30 250 30 250 0 250 -30 300 -30 300 0 300 60 150 60 150 0 x  wa 150 -100 160 -90 0 0 0 1"></v:shape>

eコマンド(end)

e・・・(end)・・・現在のサブパスを終了し、後続のサブパスは現在のサブパスと分離され独立する。従って現在のサブパスと後続のサブパスがつながりを持つこともないし、重なり合う部分もの塗りつぶしも因果を持たない。eによって現在のサブパスが閉じられる作用はない。
つまり以下のように分離してshapeエレメントを記述した場合と全く同じになる（同一座標系における絶対座標表示においてである）。

A
<v:group style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0">
<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; position:absolute; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 200 100 100 0 e m 100 0 c 50 100 100 50 100 20"></v:shape>
</v:group>
を

B
<v:group style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0">
<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; position:absolute; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 200 100 100 0 e"></v:shape>
<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; position:absolute; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 100 0 c 50 100 100 50 100 20"></v:shape>
</v:group>
としたものに同じ。

A           B

以下はeにより現在のサブパスが終了。後続のサブパスに開始点が無い（eによりendしているため)ので、青い部分のサブパスは描画されない。
eコマンドによる場合も後続のサブパスの現在点は未定義状態になる。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 200 100 100 0 e c 50 100 100 50 100 20"></v:shape>

次のようにeのあとは新規にサブパスを開始するための現在点を示すか、開始点を示さなければならない。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 200 100 100 0 e m 60 50 c 50 100 100 50 100 20"></v:shape>

平行四辺形も曲線図形もxがないので閉じられてはいない。しかしeの前後のサブパスは独立する。重なり合う部分の塗りつぶしも干渉しあうことなく、塗りつぶされる。

eコマンドで終了されていない場合との違いは次の通り。直線も後続の曲線サブパスもつながりを持った複合的サブパスになる。重なり合う部分は塗りつぶし範囲から除外される。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 200 100 100 0 m 60 50 c 50 100 100 50 100 20"></v:shape>

eコマンドで独立したパスになるということは・・・・同一の座標サイズ・ボックス内でshapeエレメントを重ねるのと同じ。

<v:group style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0">
<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 l 100 100 200 100 100 0"></v:shape>
<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:160; height:160; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 60 50 c 50 100 100 50 100 20"></v:shape>
</v:group>

xもeもつけないで曲線と直線と楕円でパスをつなげてみる。

<v:shape strokecolor="black" filled="t" stroked="t" strokeweight="2" style="width:40; height:40; rotation:0;" coordsize="160 160" coordorigin="0 0" path="m 0 0 c 0  600 900 600 900 0 l 800 0 c 800 467 100 467 100 0 l 200 0 c 200 333 700 333 700 0 l 600 0 c 600 200 300 200 300 0 wa 400 -50 500 50 0 0 0 1"></v:shape>

strokeweight="15"にしたものと座標サイズを倍にしてstrokeweight="15"としたもの。線の太さは座標単位に関わらない。
太さはパスに対し両側に膨らむようだ。

 線幅がどうなるか見るために重ねてみた。strokeweight="1pt"とstrokeweight="12pt"にしてみた。

tコマンド(rmoveto)

x1 y1 t x2 y2・・・現在位置(x1,y1)に増分(x2,y2)を現在位置に変更し、新しいサブパスを開始する。mとの違いはm x2 y2が座標系における絶対座標(x2,y2)で新しくサブパスを開始するのに対し、tは現在位置の相対的座標となる。

x3=x1+x2,y=y1+y2とすると、m x3 y3に同じ。

<v:shape stroked="false" style="width:160; height:160; left:100; top:100; position:absolute; rotation:0;" coordsize="160,160" fillcolor = "yellow coordorigin="0 0" path="m 150 150 c 150 0 150 150 0 0 x e">と<v:shape stroked="false" style="width:160; height:160; left:110; top:100; position:absolute; rotation:0;" coordsize="160,160" fillcolor = "yellow coordorigin="0 0" path="m 100 100 t 50 50 c 150 0 150 150 0 0 x e">とは同じになる。

rコマンド(rlineto)

x1 y1 r x2 y2・・・現在位置(x1,y1)から与えられた増分(x2,y2)の座標に直線を描く。
x3=x1+x2,y3=y1+y2とすると、m x1 y1 l x3 y3に同じ。

<v:shape stroked="t" style="width:160; height:160; left:100; top:100; position:absolute; rotation:0;" coordsize="160,160" fillcolor = "yellow coordorigin="0 0" path="m 50 0 r 100 100 e">は<v:shape stroked="t" style="width:160; height:160; left:100; top:100; position:absolute; rotation:0;" coordsize="160,160" fillcolor = "yellow coordorigin="0 0" path="m 50 0 l 150 150 e">に同じ。

vコマンド(rcurveto)

x1 y1 v x2 y2 x3 y3 x4 y4・・・(x,2y2),(x3,y3),(x4,y4)はいずれも現在点(x1,y1)から見た相対座標で、３次ベジエ曲線を描く。
X2=x1+x2,Y2=y1+y2,X3=x1+x3,Y3=y1+y3,X4=x1+x4,Y4=y1+y4とすると、X1 Y1 c X2 Y2 X3 Y3 X4 Y4に同じ。

<v:shape ｓtroked="t" style="width:160; height:160; left:110; top:100; position:absolute; rotation:0;" coordsize="160,160" fillcolor = "yellow" coordorigin="0 0" path="m 50 50 v 50 0 50 50 0 50 e" />は<v:shape ｓtroked="t" style="width:160; height:160; left:110; top:100; position:absolute; rotation:0;" coordsize="160,160" fillcolor = "red" coordorigin="0 0" path="m 50 50 c 100 50 100 100 50 100 e" />に同じ。