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)を頂点とする下に凸となる放物線に等しくなることを利用して、直線の描画の有限回連続によってそれを描画するものです。
0件のコメント
コメントの投稿
0件のトラックバック
- トラックバックURL
- http://noraphp.blog73.fc2.com/tb.php/15-4770ccfc
- この記事に対してトラックバックを送信する（FC2ブログユーザー）
