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

沖林正紀
2008/02/18 17: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 折れ線の描画例
記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    今、使っているマシンのOSは?

    投票受付期間:2008年6月27日 〜 2008年7月11日
  • » 投票しないで結果だけ見る