2010年9月11日土曜日

JavaScriptと図形エディターを作成することができます。

ひさしぶりです。今、JavaScriptを勉強しています。

HTMLのタグでは、テーブルや文章、水平線しか表現できないと思っていましたが、VMLやSVGを使うと図形を描画することができます。これらのタグを使ってグラフを書くこともできます。まずは、VMLで開発しています。
VMLは、IEでしか使えませんが、今後はSVGでの開発も考えています。VMLについては、とほほのVML入門をご覧ください。

そこで、これらの機能を使ってJavaScriptで簡単な図形エディターを作れないか検討しています。マウスドラッグにより図形を描画できるようにしました。
マウス位置は、onmousedownイベント発生時のマウスのXY位置を取得と、マウス移動後のonmouseupイベント発生時のマウスのXY位置から図形の開始位置と終了位置を決定し、document.createElementでVMLタグを作成し、appendChildでdivタグ追加しました。

マウスドラッグの際には、マウスを移動するたびに図形枠を表示していますが、スムーズに動作しており問題はなさそうです。
現在、図形の塗りパターンや線パターンなどを追加していますが、作成できたらソース公開しますので待っていてください。

0 件のコメント:

コメントを投稿