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

b. 文字を描画する

　文字を描画するのはGroupのcreateText()だ。これには最低でも表示位置とフォントを指定しなくてはならない。これらはどちらも設定項目が複数あるため、タイプミスをしないようにしたい。

　まず、createText()のalignは、表示位置の基準となるx,yを文字列のどの位置とするかを決めるものだ。以下の例のように”middle”の場合は基準点を文字列の中央とするが、”start”の場合は文字列の左端、”end”の場合は同じく右端となる。

　続いてsetFont()でフォントを設定するのだが、familyに続いて記述するフォントファミリは、Webブラウザで日本語（全角文字）を表示できることを確認しておきたい。なぜなら、ファミリによってはWebブラウザで日本語を表示できないことがあるからだ。

      // x, y : 基準点     align : 'middle'の場合は基準点を文字列の中心とする
      group.createText( { x : 100, y : 100, align : 'middle',
                          text : 'dojox.gfxで図形描画' } )
           .setFont( { family : 'Serif', size : 20, weight : 'bold' } )
           .setFill( 'blue' );    // 青色で表示

図2 文字の描画例

c. 縦書きで文字を描画する

　前述のcreateText()の引数にrotated : trueを追加すると、日本語（全角文字）を縦書きフォントに変更できる。ただし、それだけでは文字が左右方向に表示されてしまうので、さらにsetTransform()によって時計回りに90度回転させている。

　setTransform()内に記述されたdojox.gfx.matrix.rotategAt()は、図形を回転させるメソッドで、引数は( 回転角, 中心のX座標, 中心のY座標 )である。回転角（単位は度）は、正の値が時計回り、負の値が反時計回りとなる。回転角を45度にすれば、図4のように斜め文字を描画することもできる。

      group.createText( { x : 100, y : 100, align : 'middle',
                          text : 'dojox.gfxで図形描画', rotated : true } )
           .setFont( { family : 'Serif', size : 20, weight : 'bold' } )
           .setFill( 'blue' )
           .setTransform( dojox.gfx.matrix.rotategAt( 90, 95, 95 ) )
           // (95, 95)を中心にして時計回りに90度回転させる

図3 縦書き文字の描画例

図4 斜め文字の描画例