図形を立体的に回転させる

IE5.0以降のみ（Macintosh版IE5.0では正しく表示されない場合があります）

ダイナミックアニメーションを使うと、図形を立体的に回転させることができます。ここでは、ロゴマークを描いて立体的に回転させる方法を考えてみましょう。

■回転させるオブジェクトの作成

回転するオブジェクトを作成し、ダイナミックアニメーションの種類を設定します。

<object id="Rect" classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="position:absolute;top:150;left:200;width:400;height:400">
<param name="Line0001" value="SetFillStyle(1)">
<param name="Line0002" value="SetFillColor(0, 0, 255)">
<param name="Line0003" value="Rect(-100, -100, 100, 100, 0)">
</object>

■　ボタンの作成

ダイナミックアニメーションを使ってx軸・y軸・z軸を中心として図形を回転させる関数を作動させるボタンを設定します。

<BUTTON onclick="x=!x;">X axis</BUTTON>
<BUTTON onclick="y=!y;">Y axis</BUTTON>
<BUTTON onclick="z=!z;">Z axis</BUTTON>
<BUTTON onclick="Rect.setIdentity();">Set Identity</BUTTON>

■　ダイナミックアニメーションの作成

ダイナミックアニメーションを使ってx軸・y軸・z軸を中心として図形を回転させる関数を定義します。

x=false;
y=false;
z=false;

function axis() {
if (x) Rect.rotate(5,0,0);
if (y) Rect.rotate(0,5,0);
if (z) Rect.rotate(0,0,5);
status='x:'+x+' y:'+y+' z:'+z;
setTimeout('axis()',100);
}

■　「DrawSurface」の書式

「DrawSurface」

☆.DrawSurface.fillcolor(☆.library★)
☆.DrawSurface.rect(△,▲,○,●)
☆.DrawSurface.oval(△,▲,○,●)
☆.rotate(□,■,◆)
☆＝データソースオブジェクト名

★＝色
△＝中心から左までの距離
▲＝中心から上までの距離
○＝図形の幅
●＝図形の高さ
□＝Ｘ方向への回転角度
■＝Ｙ方向への回転角度
◆＝Ｚ方向への回転角度

■　ページのリロード

ダイナミックアニメーションを使ってオブジェクトを描画すると、環境によっては一部のオブジェクトが表示されないことがあります。
例では、この問題を解決するために、「setTimeout」を使ってページをリロードしています。

<<<戻る