2010年9月20日月曜日

VMLを使った簡単な図形エディターを作ってみました。

久しぶりです。今、JavaScriptを使って簡単な図形エディターを作っています。図形の描画については、マイクロソフトが作ったVMLを使っていますが、今後は、SVGにしないといけないかもしれません。ステップ数は、430ステップです。図形描画として直線、矩形、楕円だけですが、グラデーションや立体化、図形の移動などもマウスでできるようになっているので、結構コンパクトにできたと思っています。
文字列や多角形描画機能を入れても1000ステップぐらいになるかと思います。
使い方は、マウスドラッグにより、画面左のメニューに従って、直線・矩形・楕円を描画します。
また、図形をマウスで選択して図形の移動が可能ですが、さらに、マウス右ボタンで描画属性を変えたり、図形を消すこともできます。
図形が作成できたら、画面の中ほどにある「ソース」ボタンをクリックしてVMLタグリストを取り出し、Webページに貼り付けることで図形描画が可能となります。
このエディターを拡張したいとも思いますが、次には、SVG対応のエディターを開発することを先にしたいとも思います。
私のサイトに、このJavaScriptプログラムをアップしました。YawdbaサイトのJavaScriptのVMLエディターから添付ファイルをダウンロードしてIEで動作することができます。一息ついたら、プログラム解説を載せます。お待ちください。

2010年9月11日土曜日

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

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

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

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

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