あかさたの最近の仕事
2006-12-31 02:07 :
script.aculo.us を使って SVG や VML の要素を動かす
未踏がらみの話ですが、JavaScript を使って、ブラウザ上で VML や SVG を使って描画した要素をマウスで動かすということをしたかったので、調査してみました。結論を言えば、JavaScript で要素を動かすことはできました。ただ、JavaScript のコードを大量に書くと、クロスブラウザの問題などで手間がかかりそうなので、一歩踏み込んで script.aculo.us を使って楽をできないか試してみました。
実験としては、script.aculo.us の Draggable を使って、ブラウザ上で VML や SVG を使って描画した要素をマウスで動かすということをしてみました。
結論を言うと、VML はいけますが、SVG はいけませんでした。ちゃんとソースコードを読んだわけではないのですが、script.aculo.us の Draggable はスタイルシートの left や top を操作します。VML はこれで位置座標を変更できるのですが、SVG の Rect 要素などは、位置をスタイルシートで設定するわけではなく、x や y などの属性で位置を操作するためできません。script.aculo.us の Draggable をそういう風に書き換えれば動作するのだと思いますが、ソースを読むのもしんどいので、結局 SVG 向けには自前で Draggable 的なものを作成しました。
以下、例です。
■ VML（IE6 で動作確認済み）
○ VML
○ JavaScript（script.aculo.us）
new Draggable("vml_rect")
○ サンプル（VML）
IE だけですが、四角が表示されると思いますので、自由にドラッグしてください。
■ SVG（FireFox 1.5 以降で動作確認済み）
こちらは、script.aculo.us を使わずに自力で ECMAScript（JavaScript）をたたいて、SVG に埋め込んでいます。
※ IE では動作しません。
■ パフォーマンス
VML + script.aculo.us よりも SVG + ECMAScript の方が動作が軽いです。というか、かなりの差があります。調査していませんが以下のような原因が考えられます。
・ script.aculo.us のせい
script.aculo.us では、要素を半透明にしたりしています。
・ 環境依存
私の PC でだけパフォーマンスの差が出ているのかもしれません。（WinXP + IE6 + Pen4 2.8GHz + Mem 1GB + Geforce2 MX）
・ JavaScript エンジンの速度の差
もしかすると、スクリプトは IE の方が遅いとかあったかもしれません。
ふー、疲れた。
トラックバック
この記事のトラックバック URL：http://www.rmake-labo.com/akasata/articles/trackback/42
言及リンクのないトラックバック（このブログに触れていない記事のトラックバック）は無視されます。
Posted by あかさた（編集）
