8.2.2.VMLエディター

VML(Vector Markup Language)とは、Web上でベクターグラフィックス(線や円)を定義してブラウザに表示可能とするための言語で、InternetExplorer5以降で表示することができます。
 
VMLで定義されたタグを含むHTMLデータを作成することで図形描画が可能となります。 最も簡単なHTMLは次のようになります。
 
【VML】
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML</title>
<style>
<!--
    v\:*{ behavior : url(#default#VML); }
//-->
</style>
<body>
<v:rect strokecolor="red" style="top:100px; left:100px; width:100px; height:100px;" />
</body>
</html>
 
このHTMLを表示すると赤い矩形が描画されますが、HTMLページでは青で示した部分が、矩形を描画させる部分となります。そこで、JavaScriptのマウスイベントからその座標を取り出し、DOMオブジェクト生成の関数によって、VML図形タグを生成することでエディターを開発してみました。
このような図形描画のVMLは、Microsoft社,ヒューレットパッカード社,Macromedia社,旧Visio社に提案されましたが、将来的にはAdobe社提唱のSVG(Scalable Vector Graphics)が勧告され落ち着くようです。今回は、VMLを使ったエディターとなっていますが、SVGでも描画するエディターを開発したい思います。
 
 
 添付ファイルのエディターVML.htmlをダウンロードしてIEで起動すると右の画面が表示されます。
左上のラジオボタンが描画する図形となっており、マウスのドラッグによりそれぞれの図形描画が可能となります。
ラジオボタンの下には、いくつかのドロップダウンリストがありますが、これらの図形属性で図形を描画することができます。
また、表示された図形にマウスを持っていき、左ボタンをクリックしてドラッグすると図形が移動します。また、右ボタンをクリックしてメニュー表示することで以下の2つの機能を利用することが可能となります。
  1. 図形の削除することができます。
  2. 左画面上の図形属性により図形の塗りつぶし色や線種を変更することが可能となります。
また、その下の「ソース」ボタンをクリックすると、描画した図形のVMLタグが出力されます。この部分を取り出して、HTMLに貼り付けることで図形描画が可能となります。
 
 
 
 
添付ファイルのJavaScriptについては、後日、本章で、ソースプログラムの内容を説明したいと思います。
ċ
エディターVML.html
(17k)
dirac paul,
2010/09/20 7:27
Comments