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

沖林正紀
2008-02-18 17:00:00
前回は基本的な図形を描画する例を紹介した。今回は図形に対して、より複雑な設定を行う方法について紹介したい。折れ線グラフや文字、グラデーションを表現してみよう。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　前回は基本的な図形を描画する例を紹介した。今回は図形に対して、より複雑な設定を行う方法について紹介したい。まずは折れ線を描いてみよう。

a. 折れ線を描く

　折れ線は、複数の直線を方向を変えながら連続して引いていくものだ。折れ線のオブジェクトはGroup（前回参照）のcreatePath()で生成するが、始点への移動はmoveTo()、1つずつの直線の描画はlineTo()で行う。どちらのメソッドも折れ線のオブジェクト自身を戻すようになっているので、以下のようにメソッドを連続して記述できる。

      group.createPath()
           .setStroke( { width : 3, color : 'red' } )  // 幅3ピクセルの赤線
           .setAbsoluteMode( false )                   // 相対座標
           .moveTo( 10, 100 )                          // 始点に移動
           .lineTo( 30, 0 ).lineTo( 10, 70 )           // 以降順次折れ線を引く
           .lineTo( 30, -140 ).lineTo( 30, 70 )
           .lineTo( 40, -50 ).lineTo( 30, -5 );
図1 折れ線の描画例 図1 折れ線の描画例
  • 新着記事
  • 特集
  • ブログ