Entries
この記事が気に入ったらポチっと→
VMLエレメントのパラメータをJavaScriptによって動的に変更することを用いて、図形に動的に変化を付けることは単純に可能です。
全てのVMLエレメントにはID属性によってIDを指定できます。
JS内では、このIDはHTMLで単純に扱われるようなIDと同様に使用できます。
●基本的な参照
例えば、
<V:LINE ID="line1" FROM="0,0" TO="50,50" />
に対して
document.all.line1
が、オブジェクトになります。
そして単純に、
ev=document.all.line1.to;
や、
document.all.line1.from="20,20";
というように図形の属性値を参照することができます。
但し、.allが抜けると参照できないのでご注意ください。
また、ページ上のn番目のV:LINEオブジェクトを
document.all.tags("line")(n)
と参照できるように、ページ上のn番目V:xxxオブジェクトを
document.all.tags("xxx")(n)
として参照できます。
●動的変化の例
例１
関数MoveLineを定義する。
<SCRIPT LANGUAGE="javascript">
<!--
p_ex=0; //終点のy成分
a=1; //増加量
function MoveLine(){
if(p_ex>=100)a=-1; //y成分が100以上ならば増加量aを-1にする
else if(p_ex<=0)a=1; //y成分が0以下ならば増加量aを1にする
p_ex+=a;
document.all.line1.to="100,"+p_ex; //to属性に直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveLine()",10)として実行されるようにボタン作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveLine()',10)" VALUE="実行">
IDがline1となるV:LINEを作る。(DIV[w100,h100]によって囲われる)
<DIV STYLE="position:relative;width:100px;height:100px;"><V:LINE ID="line1" FROM="0,0" TO="100,0" /></DIV>
以上は、ボタンをクリックすると、V:LINE(line1)の終点が(100,100)に達したら(100,0)になるまでyの成分を減少させ、(100,0)に達したら(100,0)になるまでyの成分を増加させる、という動作を繰り返すものです。
例２
関数MoveNeedleを定義する。
<SCRIPT LANGUAGE="JavaScript">
<!--
an=0;
function MoveNeedle(){
an+=Math.PI/180; //角度を1度増やす
p_ex2=Math.floor(Math.cos(an)*50)+50; //コサインによってxを算出
p_ey2=Math.floor(Math.sin(an)*50)+50; //サインによってyを算出
document.all.shape1.path="ar 0,0 100,100 50,0 50,0 e m 50,50 l "+p_ex2+","+p_ey2+" e"; //パスに直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveNeedle()",10)を実行するボタンを作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveNeedle()',10)" VALUE="実行">
IDがshape1となるV:SHAPEを作る。
<V:SHAPE ID="shape1" STYLE="position:relative;width:100px;height:100px;" COORDORIGON="0,0" COORDSIZE="100,100" PATH="ar 0,0 100,100 50,0 50,0 e m 50,50 l 100,50 e" />
↑は、簡単に言えば時計の型です。
例３
関数DrawCurve()を定義します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function DrawCurve(){
LineCnt=(new Number(document.all.linecnt.value))+1;
if(LineCnt<=1)return false;
Path="m 0,0 l 20,160 40,0 e ";
for(I=1;I<LineCnt;I++){
SX=Math.floor((I/LineCnt)*20);
SY=Math.floor((I/LineCnt)*160);
EX=SX+1;
EY=Math.floor(((LineCnt-I)/LineCnt)*160);
Path+="m "+SX+","+SY+" l "+EX+","+EY+" e ";
}
document.all.shape2.path=Path;
}
//-->
</SCRIPT>
IDがlinecntとなるテキストボックスと、ONCLICKがDrawCurve()を実行するボタンを作る。
<INPUT ID="linecnt" TYPE="text" VALUE="10"><INPUT TYPE="button" VALUE="描画" ONCLICK="DrawCurve()">
IDがshape2となるV:SHAPEを作る。
<V:SHAPE ID="shape2" STYLE="position:relative;width:40px;height:160px;" COORDORIGIN="0,0" COORDSIZE="40,160" PATH="m 0,0 l 20,160 40,0 e" />
これは、始点(0,0)、制御点(20,160)、終点(40,0)となる２次ベジェ曲線が丁度点(20,80)を頂点とする下に凸となる放物線に等しくなることを利用して、直線の描画の有限回連続によってそれを描画するものです。
全てのVMLエレメントにはID属性によってIDを指定できます。
JS内では、このIDはHTMLで単純に扱われるようなIDと同様に使用できます。
●基本的な参照
例えば、
<V:LINE ID="line1" FROM="0,0" TO="50,50" />
に対して
document.all.line1
が、オブジェクトになります。
そして単純に、
ev=document.all.line1.to;
や、
document.all.line1.from="20,20";
というように図形の属性値を参照することができます。
但し、.allが抜けると参照できないのでご注意ください。
また、ページ上のn番目のV:LINEオブジェクトを
document.all.tags("line")(n)
と参照できるように、ページ上のn番目V:xxxオブジェクトを
document.all.tags("xxx")(n)
として参照できます。
●動的変化の例
例１
関数MoveLineを定義する。
<SCRIPT LANGUAGE="javascript">
<!--
p_ex=0; //終点のy成分
a=1; //増加量
function MoveLine(){
if(p_ex>=100)a=-1; //y成分が100以上ならば増加量aを-1にする
else if(p_ex<=0)a=1; //y成分が0以下ならば増加量aを1にする
p_ex+=a;
document.all.line1.to="100,"+p_ex; //to属性に直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveLine()",10)として実行されるようにボタン作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveLine()',10)" VALUE="実行">
IDがline1となるV:LINEを作る。(DIV[w100,h100]によって囲われる)
<DIV STYLE="position:relative;width:100px;height:100px;"><V:LINE ID="line1" FROM="0,0" TO="100,0" /></DIV>
以上は、ボタンをクリックすると、V:LINE(line1)の終点が(100,100)に達したら(100,0)になるまでyの成分を減少させ、(100,0)に達したら(100,0)になるまでyの成分を増加させる、という動作を繰り返すものです。
例２
関数MoveNeedleを定義する。
<SCRIPT LANGUAGE="JavaScript">
<!--
an=0;
function MoveNeedle(){
an+=Math.PI/180; //角度を1度増やす
p_ex2=Math.floor(Math.cos(an)*50)+50; //コサインによってxを算出
p_ey2=Math.floor(Math.sin(an)*50)+50; //サインによってyを算出
document.all.shape1.path="ar 0,0 100,100 50,0 50,0 e m 50,50 l "+p_ex2+","+p_ey2+" e"; //パスに直接代入
}
//-->
</SCRIPT>
クリックによってsetInterval("MoveNeedle()",10)を実行するボタンを作る。
<INPUT TYPE="button" ONCLICK="setInterval('MoveNeedle()',10)" VALUE="実行">
IDがshape1となるV:SHAPEを作る。
<V:SHAPE ID="shape1" STYLE="position:relative;width:100px;height:100px;" COORDORIGON="0,0" COORDSIZE="100,100" PATH="ar 0,0 100,100 50,0 50,0 e m 50,50 l 100,50 e" />
↑は、簡単に言えば時計の型です。
例３
関数DrawCurve()を定義します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function DrawCurve(){
LineCnt=(new Number(document.all.linecnt.value))+1;
if(LineCnt<=1)return false;
Path="m 0,0 l 20,160 40,0 e ";
for(I=1;I<LineCnt;I++){
SX=Math.floor((I/LineCnt)*20);
SY=Math.floor((I/LineCnt)*160);
EX=SX+1;
EY=Math.floor(((LineCnt-I)/LineCnt)*160);
Path+="m "+SX+","+SY+" l "+EX+","+EY+" e ";
}
document.all.shape2.path=Path;
}
//-->
</SCRIPT>
IDがlinecntとなるテキストボックスと、ONCLICKがDrawCurve()を実行するボタンを作る。
<INPUT ID="linecnt" TYPE="text" VALUE="10"><INPUT TYPE="button" VALUE="描画" ONCLICK="DrawCurve()">
IDがshape2となるV:SHAPEを作る。
<V:SHAPE ID="shape2" STYLE="position:relative;width:40px;height:160px;" COORDORIGIN="0,0" COORDSIZE="40,160" PATH="m 0,0 l 20,160 40,0 e" />
これは、始点(0,0)、制御点(20,160)、終点(40,0)となる２次ベジェ曲線が丁度点(20,80)を頂点とする下に凸となる放物線に等しくなることを利用して、直線の描画の有限回連続によってそれを描画するものです。
この記事が気に入ったらポチっと→
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]を意味します。これによってサブパスは囲われた図形になります。
（他にもありますが長くなるので次に）
この記事が気に入ったらポチっと→
これはあまり知られていない技
↓のような色を選択するダイアログを表示できます。
これはコンポーネントなので、次のOBJECTタグを貼り付ける必要があります。(こういうのはHEADに納めるのがいいと思います。)
<OBJECT ID="ccdlg" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0" HEIGHT="0"></OBJECT>
↑を貼ると、chooseColorDlg関数が使えるようになります。この関数は、OBJECTに指定したIDに属します。(ccdlg.chooseColorDlg())
int chooseColorDlg(string initialColor)
initialColorはダイアログの選択色の初期値(0〜1677215、#rrggbb形式、blackなどの定義色名も可能)
返り値は選択された色の0〜16777215となる10進数値です。
返り値が複雑なので、toString(16)で16進数に置き換えます。
しかし#rrggbb形式にするには、6桁にしなければならないので、
"00000"を手前に連結させて、substringで右から6文字分を切り取ります。
ここではボタンを押すとダイアログが表示され、選択した色にボタンの文字色が変わるものを考えます。
SCRIPTタグ内にて、id.style.colorをダイアログで指定した色に変える関数changeTextColor(id)を定義します。
<SCRIPT LANGUAGE="JavaScript">
function changeTextColor(id){
var IniCol=id.style.color;
var NewCol=ccdlg.chooseColorDlg(IniCol);
NewCol=NewCol.toString(16);
NewCol="00000"+NewCol;
NewCol=NewCol.substring(NewCol.length-6,NewCol.length);
NewCol="#"+NewCol;
id.style.color=NewCol;
}
</SCRIPT>
自分自身(this)を引数に、changeTextColor(this)とした構文をONCLICKに指定したINPUTボタンを作ります。
<INPUT TYPE="button" VALUE="色選択ダイアログ" ONCLICK="changeTextColor(this)">
これで完成です。
SCRIPT部分もこれまたHEAD内に納めるべきでしょう。(OBJECTよりは後に。)
OBJECTはページが完全にロードされた後にロードされる(ような)ので、SCRIPT中でいきなり関数を呼び出しても動作しません(でした。経験談)
ONLOADで実行すると大丈夫な模様です。(経験談)
↓のような色を選択するダイアログを表示できます。
これはコンポーネントなので、次のOBJECTタグを貼り付ける必要があります。(こういうのはHEADに納めるのがいいと思います。)
<OBJECT ID="ccdlg" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0" HEIGHT="0"></OBJECT>
↑を貼ると、chooseColorDlg関数が使えるようになります。この関数は、OBJECTに指定したIDに属します。(ccdlg.chooseColorDlg())
int chooseColorDlg(string initialColor)
initialColorはダイアログの選択色の初期値(0〜1677215、#rrggbb形式、blackなどの定義色名も可能)
返り値は選択された色の0〜16777215となる10進数値です。
返り値が複雑なので、toString(16)で16進数に置き換えます。
しかし#rrggbb形式にするには、6桁にしなければならないので、
"00000"を手前に連結させて、substringで右から6文字分を切り取ります。
ここではボタンを押すとダイアログが表示され、選択した色にボタンの文字色が変わるものを考えます。
SCRIPTタグ内にて、id.style.colorをダイアログで指定した色に変える関数changeTextColor(id)を定義します。
<SCRIPT LANGUAGE="JavaScript">
function changeTextColor(id){
var IniCol=id.style.color;
var NewCol=ccdlg.chooseColorDlg(IniCol);
NewCol=NewCol.toString(16);
NewCol="00000"+NewCol;
NewCol=NewCol.substring(NewCol.length-6,NewCol.length);
NewCol="#"+NewCol;
id.style.color=NewCol;
}
</SCRIPT>
自分自身(this)を引数に、changeTextColor(this)とした構文をONCLICKに指定したINPUTボタンを作ります。
<INPUT TYPE="button" VALUE="色選択ダイアログ" ONCLICK="changeTextColor(this)">
これで完成です。
SCRIPT部分もこれまたHEAD内に納めるべきでしょう。(OBJECTよりは後に。)
OBJECTはページが完全にロードされた後にロードされる(ような)ので、SCRIPT中でいきなり関数を呼び出しても動作しません(でした。経験談)
ONLOADで実行すると大丈夫な模様です。(経験談)
この記事が気に入ったらポチっと→
Prev【VML】Pt.2 定義済みの図形2 arc polyline curve
【image】
画像を表示します。
この画像表示では、IMGタグにはできない特有の属性があります。
ここでは、この132x176画像
を使用します。
▼これは単純な表示
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" />
▼刈り込み(部分表示)
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:99px;height:88px;" CROPLEFT="0.2" CROPRIGHT="0.05" CROPTOP="0.1" CROPBOTTOM="0.4" />
CROPLEFT,CROPRIGHT,CROPTOP,CROPBOTTOMは、それぞれ左、右、上、下からの刈り込み率(百分率(0~1))
width,heightの変更に注意。
▼コントラスト指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAIN="8" />
GAINはコントラスト値(-128~128)[範囲詳しくは不明]
1=通常
0=灰色
-1=ネガ ←W3Cノートには記述されていませんでしたがやってみたところできるようです。原理上のことなのかは知りませんが…。
▼明るさ指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BLACKLEVEL="0.3" />
BLACKLEVELは明るさの値(-1〜1)[範囲詳しくは不明](0.5、-0.5ぐらいでほぼ真っ白、真っ黒になります。)
▼ガンマ補正
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAMMA="3" />
GAMMAはガンマ値(0＜値≦1000ぐらい)[範囲詳しくは不明](1が通常で0に近づくほど白く、1より大きくすると黒くなる。)
▼グレイスケール
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GRAYSCALE="true" />
GRAYSCALEはtrueまたはfalseを指定。[trueが肯定、falseが否定。以後この2値を真偽値という。]
▼2色(黒白)化
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BILEVEL="true" />
BILEVELは真偽値を指定。
･･･と、imageには様々な属性がある。
恐らく使い道は少ないのでしょうけど。
尚、ここで登場している熱帯魚は実際に飼っているやつです(笑)
【image】
画像を表示します。
この画像表示では、IMGタグにはできない特有の属性があります。
ここでは、この132x176画像
を使用します。
▼これは単純な表示
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" />
▼刈り込み(部分表示)
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:99px;height:88px;" CROPLEFT="0.2" CROPRIGHT="0.05" CROPTOP="0.1" CROPBOTTOM="0.4" />
CROPLEFT,CROPRIGHT,CROPTOP,CROPBOTTOMは、それぞれ左、右、上、下からの刈り込み率(百分率(0~1))
width,heightの変更に注意。
▼コントラスト指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAIN="8" />
GAINはコントラスト値(-128~128)[範囲詳しくは不明]
1=通常
0=灰色
-1=ネガ ←W3Cノートには記述されていませんでしたがやってみたところできるようです。原理上のことなのかは知りませんが…。
▼明るさ指定
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BLACKLEVEL="0.3" />
BLACKLEVELは明るさの値(-1〜1)[範囲詳しくは不明](0.5、-0.5ぐらいでほぼ真っ白、真っ黒になります。)
▼ガンマ補正
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GAMMA="3" />
GAMMAはガンマ値(0＜値≦1000ぐらい)[範囲詳しくは不明](1が通常で0に近づくほど白く、1より大きくすると黒くなる。)
▼グレイスケール
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" GRAYSCALE="true" />
GRAYSCALEはtrueまたはfalseを指定。[trueが肯定、falseが否定。以後この2値を真偽値という。]
▼2色(黒白)化
<V:IMAGE SRC="http://blog-imgs-16.fc2.com/n/o/r/noraphp/gaxo.jpg" STYLE="width:132px;height:176px;" BILEVEL="true" />
BILEVELは真偽値を指定。
･･･と、imageには様々な属性がある。
恐らく使い道は少ないのでしょうけど。
尚、ここで登場している熱帯魚は実際に飼っているやつです(笑)
この記事が気に入ったらポチっと→
Prev【VML】Pt.1 定義済みの図形1 line rect roundrect oval
Next【VML】Pt.3 定義済みの図形3 image
この３つでのFILLCOLORは大抵の場合背景と同じにしますが、原理的に分かりやすくするため背景に同化しない色を指定しています。もちろん背景を透明にすることもできますが。
【arc】
弧を描画します。
<DIV><V:ARC STARTANGLE="0" ENDANGLE="90" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" STYLE="width:60px;height:60px;" /></DIV>
STARTANGLEは開始する角(0が真上)
ENDANGLEは終了する角(時計回り(負ならば反時計回り)に描画されます。)
弧においてFILLCOLORで塗りつぶされるのは、弧と弦によって囲われた部分になります。
【polyline】
折れ線を描画します。
line同様、width,heightは無視されます。
<DIV STYLE="width:90px;height:60px;"><V:POLYLINE POINTS="0 0 30 60 60 0 90 60" STROKECOLOR="#0000FF" STROKEWEIGHT="0" FILLCOLOR="#BBBBEE" /></DIV>
POINTSは2Dベクトルをスペースで区切って、x1 y1 x2 y2 x3 y3･･･と記述していきます（線はx1,y1→x2,y2→･･･と追って描画されます）。
折れ線において塗りつぶされるところは、始点と終点を結んでできた多角形の内部となります。
【curve】
3次ベジェ曲線を描画します。
<DIV STYLE="width:100px;height:50px;"><V:CURVE FROM="0,0" TO="100,50" CONTROL1="10,50" CONTROL2="90,0" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" /></DIV>
FROM,CONTROL1,CONTROL2,TOはそれぞれ始点,操作点1,操作点2,終点を2Dベクトルで指定します。
CURVEにおいて塗りつぶされる部分は、始点と終点を結ぶ線と曲線によって囲われた部分となります。
曲線に関することはWikipedia:ベジェ曲線を参照してください。
Next【VML】Pt.3 定義済みの図形3 image
この３つでのFILLCOLORは大抵の場合背景と同じにしますが、原理的に分かりやすくするため背景に同化しない色を指定しています。もちろん背景を透明にすることもできますが。
【arc】
弧を描画します。
<DIV><V:ARC STARTANGLE="0" ENDANGLE="90" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" STYLE="width:60px;height:60px;" /></DIV>
STARTANGLEは開始する角(0が真上)
ENDANGLEは終了する角(時計回り(負ならば反時計回り)に描画されます。)
弧においてFILLCOLORで塗りつぶされるのは、弧と弦によって囲われた部分になります。
【polyline】
折れ線を描画します。
line同様、width,heightは無視されます。
<DIV STYLE="width:90px;height:60px;"><V:POLYLINE POINTS="0 0 30 60 60 0 90 60" STROKECOLOR="#0000FF" STROKEWEIGHT="0" FILLCOLOR="#BBBBEE" /></DIV>
POINTSは2Dベクトルをスペースで区切って、x1 y1 x2 y2 x3 y3･･･と記述していきます（線はx1,y1→x2,y2→･･･と追って描画されます）。
折れ線において塗りつぶされるところは、始点と終点を結んでできた多角形の内部となります。
【curve】
3次ベジェ曲線を描画します。
<DIV STYLE="width:100px;height:50px;"><V:CURVE FROM="0,0" TO="100,50" CONTROL1="10,50" CONTROL2="90,0" STROKECOLOR="#0000FF" STROKEWEIGHT="1" FILLCOLOR="#BBBBEE" /></DIV>
FROM,CONTROL1,CONTROL2,TOはそれぞれ始点,操作点1,操作点2,終点を2Dベクトルで指定します。
CURVEにおいて塗りつぶされる部分は、始点と終点を結ぶ線と曲線によって囲われた部分となります。
曲線に関することはWikipedia:ベジェ曲線を参照してください。
