dojoを拡張する:DojoX GFXによる図形描画(後編)

沖林正紀
2008-02-18 17:00:00
  • このエントリーをはてなブックマークに追加

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

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 折れ線の描画例
  • 新着記事
  • 特集
  • ブログ