VMLのskewサブエレメント

VML の Microsoft Office拡張タグ・・・skewサブエレメントについての翻訳（機械翻訳を基にしています。）

ここでは<v:image />や<v:group />で有効かも確かめる。extructionも傾斜されるかも確かめる。matrix属性とon属性が適切でなければ、傾斜しない。

一例として、shapeボックスを黒で、バウンディングキューブを白で次に示す。押し出し部分もバウンディングキューブで表現される。青いボックスはshapeエレメントに付く枠（border）である。BODERは、shape図形全体を包み込む形で、外接する長方形になる。

<v:shape strokecolor="red" fillcolor="yellow" style="border:blue solid 1px; width:100; height:100; rotation:0; position:absolute; left:100; top:100" coordsize="100,100" coordorigin="0,0" path="m 0 -57 c -66 -91 -101 20 0 67 c 101 20 66 -91 0 -57 x m 0 -33 c -38 -56 -67 -7 0 44 c 67 -7 38 -56 0 -33 x wr -2 -2 2 2 -1000 -1000 -1000 -999 x e">
<v:skew matrix="1,-1,0,1,0,0" on="t" />
</v:shape >

を基本とする。シェープ図形のハートは、原点がハートの中心になるように描いてみた。<v:skew matrix="1,-1,0,1,0,0" on="t" />

白線は実際のバウンディングキューブ（render="boundingcube"） extruction をつけてみた。<v:skew matrix="1,-1,0,1,0,0" on="t" />
extructionの属性はautorotationcenter="f" rotationcenter="-2,-2,0"の場合。Extructionも傾斜する。

赤は構文。スクリプトでは、element.Atrribute-"属性値"。HTML+TIMEでは、atrributename="Atrribute" to="属性値"。
VMLタグでは、<v: skew Atrribute="属性値" />

Attribute(属性) Description (説明）

Ext Defines the way a skew is displayed. This attribute is used to tell graphical editors how to process the Skew element.
1つの、斜めに表示される方法の定義です。この属性は斜めの要素を処理する方法をグラフ式のエディターに伝えるために使用されます。

ext="属性値 "

次の属性値があります。

・edit

・view・・・デフォルト

・backwardCompatible
斜めの要素を処理する方法をグラフィカルなエディターに伝えるために使用される。
これはまあ普通のユーザーには関係なしっと。

Matrix
Defines a perspective transform of a skew.

傾斜変形を遠近法で定義します。
matrix="属性値 "

The matrix is a string in the form "sxx, sxy, syx, syy, px, py" where s is scale, p is perspective, and x and y are x and y values. If Offset is in absolute units, then px and py are in emu^-1 units (otherwise they are an inverse fraction of the shape size). The default value is "1,0,0,1,0,0".

デフォルトはmatrix="1,0,0,1,0,0"。書式：matrix="sxx, sxy, syx, syy, px, py"遠近法的変形マトリックス。[s=scale, p=perspective] もしオフセットが絶対的単位であれば px,py は emu^-1 単位であり、そうでなければ図形サイズの逆数である。

・sxx・・・横幅の倍率。図形の横サイズを比率で扱う。、デフォルトは1倍。

・sxy・・・縦の線の傾きのタンジェント。デフォルトは0でtan0°=0。1とすると左に45度傾斜する。マイナス値で逆傾斜。

・syx・・・横線の傾きのタンジェント。デフォルトは0でtan0°=0。１とすると下に45度傾斜する。マイナス値で逆傾斜。

・syy・・・縦高さの倍率。図形の縦サイズを比率で扱う。デフォルトは1倍。

※tanθの主な値・・・tan45°=1、 tan30°≒0.577≒、 tan60°≒1.732、tan(-45°)=-1、tan(-30°)≒-0.577、tan(-60°)≒-1.732

※px pyについては、行列としてのベクトル変形に用いられるようです。よくわからん。

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,1,0,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：1（45°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0.577,0,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：0.577（30°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,-1.732,0,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：-1.732（-60°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0,1.732,1,0,0" on="t" />
縦横サイズ倍率：1、横の線の傾斜角度：1.732（60°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0,-1.732,1,0,0" on="t" />
縦横サイズ倍率：1、横の線の傾斜角度：-1.732（-60°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0,-0.364,1,0,0" on="t" />
縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,-0.364,-0.364,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：-0.364（-20°)、横の線の傾斜角度：-0.364（-20°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0.364,-0.364,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：0.364（20°)、横の線の傾斜角度：-0.364（-20°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="0.5,-0.577,0,1,0,0" on="t" />
横サイズ倍率：0.5、縦の線の傾斜角度：-0.577（-30°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,-0.577,0,0.5,0,0" on="t" />
縦サイズ倍率：0.5、縦の線の傾斜角度：-0.577（-30°)

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0,0,0.7,0.0000001,0.0000001" on="t" offset="10px,10px" />
縦サイズ倍率：0.7、px=0.0000001、py=0.0000001

<v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" />
<v:skew matrix="1,0,0,0.7,0.0000001,0.0000002" on="t" offset="10px,10px" />
縦サイズ倍率：0.7、px=0.0000001、py=0.0000002

画像は傾斜できるか？（v:image）
<v:image src="sakuranboo.gif" strokecolor="red" fillcolor="yellow" style="border:blue solid 1px; position:absolute; rotation:0; left:0px; top:0px; width:70px; height:108px;">
<v:skew matrix="1,0,-0.364,1,0,0" on="t" />
縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

尚、:shapeのfillサブエレメントにframeで貼り付けた場合も、傾斜しない。

imagedataサブエレメントはどうか？

<v:imagedata src="sakuranboo.gif" />
<v:skew matrix="1,1,0,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：1（45°)

はい、傾斜はしませんね。座標系は圧縮・伸張されるようですが。

Offset
Defines the offset of the skew.

傾斜のオフセットを定義します。

offset="属性値 "

Determines the amount of x and y offset from the shape's original location. Values are defined in absolute measurement or fractional values of a shape (ranging from -0.5 to +0.5). Default is 0,0.

シェープのオリジナルの位置から相殺されたxおよびyの量を決定します。値は、シェープ（-0.5～+0.5まで変動して）の絶対的な測定か断片的な値の中で定義されます。デフォルトは0,0です。

offse.x offset.y

matrixとoffsetの関係は複雑そうで、offsetが絶対単位である場合とそうでは無い場合とで、傾斜の起こり方が変わったり、エラーになったりと難しい。
ここではmatrixのpxとpyにはあまり触れない。

offsetを(-0.5,-0.5) (0,0) (0.5,0.5)で重ねてみた。
matrix="1,-0.364,0,1,0,0"

縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

では(-5pt,-5pt) (5px,5px) (5cm,5cm) はどうか

縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

On
Determines whether a skew will be displayed.

傾斜はこの決定によって表示されるだろう。

on="属性値 "

デフォルトはfalse.

trueに指定されなければ、傾斜は起こらない。

on="t"
<v:skew matrix="1,1,0,1,0,0" on="t" />
縦横サイズ倍率：1、縦の線の傾斜角度：1（45°)

on="f"
<v:skew matrix="1,1,0,1,0,0" on="f" />
縦横サイズ倍率：1、縦の線の傾斜角度：1（45°)

Origin
Defines the origin of the skew.

傾斜軸の開始場所を定義します。傾斜していない軸は変わりません。

origin="属性値 "

値は典型的にシェープのサイズ、および-0.5から+0.5までの範囲の割合です。シェープのサイズの倍数としてオフセットを与える、より大きな値が許可されます。デフォルトは0,0です。

origin.x origin.y

offset="0,0"で、originを (-0.5,-0.5) (0,0) (0.5,0.5)で重ねてみる。
matrix="1,0,-0.364,1,0,0"

縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

ん～？

では、offset="0,0"で、originを (-0.5,0) (0,0) (0.5,0)で重ねてみる。
matrix="1,0,-0.364,1,0,0""

縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

次はoffset="0,0"で、originを (0,-0.5) (0,0) (0,0.5)で重ねてみる。
matrix="1,0,-0.364,1,0,0"

縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)

傾斜を縦の線に変えてみる。

offset="0,0"で、originを (-0.5,-0.5) (0,0) (0.5,0.5)で重ねてみる。
matrix="1,-0.364,0,1,0,0"

縦横サイズ倍率：1、縦の線の傾斜角度：-0.364（-20°)

offset (-0.5,-0.5) (0.5,0.5) と、origin (-0.5,-0.5) (0.5,0.5) との組み合わせ。
matrix="1,-0.364,0.364,1,0,0"

縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)、縦の線の傾斜角度：0.364（20°)

入力は半角で。全角や入れることのできない値・文字列は、エラーとなる場合があります。

黄色の線はわかりやすくするための補助線です。赤い線は変形していない場合の図形です。左緑の点は<v:group>の座標系の原点。

<v:skew matrix="1,1,0,1,0,0" on="t" />図形境界ボックスのサイズは元のまま(sxx=1、syy=1）。縦空間を左に45°傾けています（sxy=tan45°=1）。

<v:skew matrix="1,-1,0,1,0,0" on="t" />図形境界ボックスのサイズは元のまま(sxx=1、syy=1）。縦空間を右に45°傾けています（sxy=tan(-45°)=-1）。

ext	edit view backwardCompatible			on	false true
---------------		offset	x= y= 単位は入れてもよさそうだ・・・。	shadow on/off	false true
origin		rotation	°	extruction on/off	false true
*matrix*		例）
matrix="sxx,sxy,syx,syy,px,py"		sxx= sxy= syx= syy= px= py=

Attribute(属性)	Description (説明）
Ext	Defines the way a skew is displayed. This attribute is used to tell graphical editors how to process the Skew element. 1つの、斜めに表示される方法の定義です。この属性は斜めの要素を処理する方法をグラフ式のエディターに伝えるために使用されます。 ext="属性値 " 次の属性値があります。・edit ・view・・・デフォルト・backwardCompatible 斜めの要素を処理する方法をグラフィカルなエディターに伝えるために使用される。これはまあ普通のユーザーには関係なしっと。
Matrix	Defines a perspective transform of a skew. 傾斜変形を遠近法で定義します。 matrix="属性値 " The matrix is a string in the form "sxx, sxy, syx, syy, px, py" where s is scale, p is perspective, and x and y are x and y values. If Offset is in absolute units, then px and py are in emu^-1 units (otherwise they are an inverse fraction of the shape size). The default value is "1,0,0,1,0,0". デフォルトはmatrix="1,0,0,1,0,0"。書式：matrix="sxx, sxy, syx, syy, px, py"遠近法的変形マトリックス。[s=scale, p=perspective] もしオフセットが絶対的単位であれば px,py は emu^-1 単位であり、そうでなければ図形サイズの逆数である。・sxx・・・横幅の倍率。図形の横サイズを比率で扱う。、デフォルトは1倍。・sxy・・・縦の線の傾きのタンジェント。デフォルトは0でtan0°=0。1とすると左に45度傾斜する。マイナス値で逆傾斜。・syx・・・横線の傾きのタンジェント。デフォルトは0でtan0°=0。１とすると下に45度傾斜する。マイナス値で逆傾斜。・syy・・・縦高さの倍率。図形の縦サイズを比率で扱う。デフォルトは1倍。 ※tanθの主な値・・・tan45°=1、 tan30°≒0.577≒、 tan60°≒1.732、tan(-45°)=-1、tan(-30°)≒-0.577、tan(-60°)≒-1.732 ※px pyについては、行列としてのベクトル変形に用いられるようです。よくわからん。 <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,1,0,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：1（45°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0.577,0,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：0.577（30°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,-1.732,0,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：-1.732（-60°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0,1.732,1,0,0" on="t" /> 縦横サイズ倍率：1、横の線の傾斜角度：1.732（60°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0,-1.732,1,0,0" on="t" /> 縦横サイズ倍率：1、横の線の傾斜角度：-1.732（-60°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0,-0.364,1,0,0" on="t" /> 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,-0.364,-0.364,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：-0.364（-20°)、横の線の傾斜角度：-0.364（-20°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0.364,-0.364,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：0.364（20°)、横の線の傾斜角度：-0.364（-20°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="0.5,-0.577,0,1,0,0" on="t" /> 横サイズ倍率：0.5、縦の線の傾斜角度：-0.577（-30°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,-0.577,0,0.5,0,0" on="t" /> 縦サイズ倍率：0.5、縦の線の傾斜角度：-0.577（-30°) <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0,0,0.7,0.0000001,0.0000001" on="t" offset="10px,10px" /> 縦サイズ倍率：0.7、px=0.0000001、py=0.0000001 <v:extrusion on="t" type="perspective" skewangle="0" backdepth="10" foredepth="10" color="red" viewpointorigin="0,0" viewpoint ="0,0" rotationangle="0,45" autorotationcenter="f" rotationcenter="-2,-2,0" /> <v:skew matrix="1,0,0,0.7,0.0000001,0.0000002" on="t" offset="10px,10px" /> 縦サイズ倍率：0.7、px=0.0000001、py=0.0000002 画像は傾斜できるか？（v:image） <v:image src="sakuranboo.gif" strokecolor="red" fillcolor="yellow" style="border:blue solid 1px; position:absolute; rotation:0; left:0px; top:0px; width:70px; height:108px;"> <v:skew matrix="1,0,-0.364,1,0,0" on="t" /> 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°) 尚、:shapeのfillサブエレメントにframeで貼り付けた場合も、傾斜しない。 imagedataサブエレメントはどうか？ <v:imagedata src="sakuranboo.gif" /> <v:skew matrix="1,1,0,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：1（45°) はい、傾斜はしませんね。座標系は圧縮・伸張されるようですが。
Offset	Defines the offset of the skew. 傾斜のオフセットを定義します。 offset="属性値 " Determines the amount of x and y offset from the shape's original location. Values are defined in absolute measurement or fractional values of a shape (ranging from -0.5 to +0.5). Default is 0,0. シェープのオリジナルの位置から相殺されたxおよびyの量を決定します。値は、シェープ（-0.5～+0.5まで変動して）の絶対的な測定か断片的な値の中で定義されます。デフォルトは0,0です。 offse.x offset.y matrixとoffsetの関係は複雑そうで、offsetが絶対単位である場合とそうでは無い場合とで、傾斜の起こり方が変わったり、エラーになったりと難しい。ここではmatrixのpxとpyにはあまり触れない。 offsetを(-0.5,-0.5) (0,0) (0.5,0.5)で重ねてみた。 matrix="1,-0.364,0,1,0,0" 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°) では(-5pt,-5pt) (5px,5px) (5cm,5cm) はどうか縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)
On	Determines whether a skew will be displayed. 傾斜はこの決定によって表示されるだろう。 on="属性値 " デフォルトはfalse. trueに指定されなければ、傾斜は起こらない。 on="t" <v:skew matrix="1,1,0,1,0,0" on="t" /> 縦横サイズ倍率：1、縦の線の傾斜角度：1（45°) on="f" <v:skew matrix="1,1,0,1,0,0" on="f" /> 縦横サイズ倍率：1、縦の線の傾斜角度：1（45°)
Origin	Defines the origin of the skew. 傾斜軸の開始場所を定義します。傾斜していない軸は変わりません。 origin="属性値 " 値は典型的にシェープのサイズ、および-0.5から+0.5までの範囲の割合です。シェープのサイズの倍数としてオフセットを与える、より大きな値が許可されます。デフォルトは0,0です。 origin.x origin.y offset="0,0"で、originを (-0.5,-0.5) (0,0) (0.5,0.5)で重ねてみる。 matrix="1,0,-0.364,1,0,0" 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°) ん～？では、offset="0,0"で、originを (-0.5,0) (0,0) (0.5,0)で重ねてみる。 matrix="1,0,-0.364,1,0,0"" 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°) 次はoffset="0,0"で、originを (0,-0.5) (0,0) (0,0.5)で重ねてみる。 matrix="1,0,-0.364,1,0,0" 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°) 傾斜を縦の線に変えてみる。 offset="0,0"で、originを (-0.5,-0.5) (0,0) (0.5,0.5)で重ねてみる。 matrix="1,-0.364,0,1,0,0" 縦横サイズ倍率：1、縦の線の傾斜角度：-0.364（-20°) offset (-0.5,-0.5) (0.5,0.5) と、origin (-0.5,-0.5) (0.5,0.5) との組み合わせ。 matrix="1,-0.364,0.364,1,0,0" 縦横サイズ倍率：1、横の線の傾斜角度：-0.364（-20°)、縦の線の傾斜角度：0.364（20°)