dojoを拡張する：DojoX GFXによる図形描画（前編）

描画のための準備

　まずコンポーネントが存在することを確認しておこう。ダウンロードしたファイルを展開すると、dojoxというディレクトリが生成されているはずだ。さらにその中にgfxというフォルダが生成されていれば、dojox.gfxというコンポーネントが利用できる。

1. HTMLのVML対応

　WebページがIEからアクセスされる可能性がある場合には、タグに以下のような名前空間の定義を追加し、VMLに対応できるようにしておこう。

      ＆lt;html xmlns:v="urn:schemas-microsoft-com:vml"
            xmlns:o="urn:schemas-microsoft-com:office:office"＆gt;

2. コンポーネントのインポート

　そこで、まずこれをインポートしておこう。ソースコードでは以下のように記述する。

      dojo.require( 'dojox.gfx' );

3. 図形を描画する領域を設定

　次に図形を描画する領域を設定する。このときあらかじめ領域の大きさをCSSで設定しておこう。そして描画する面を定義し、図形オブジェクトを格納するグループオブジェクト（dojox.gfx.Group、以下Group）を取得する。以下に200x200ピクセルの領域canvasに図形を描画する場合の例を示す。

      [dojo]
      // 図形を描画する面
      var canvas = dojox.gfx.createSurface( dojo.byId( 'canvas' ), 200, 200 );
      // グループオブジェクト
      var group  = canvas.createGroup();   // dojox.gfx.Group

      [CSS]
      div#canvas  {  width : 200px;    height : 200px;   }

      [HTML]
      ＆lt;div id="canvas"＆gt;＆lt;/div＆gt;