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にログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Java Off Topic Internet Explorer Opera iPod touch Firefox 3 Linux インストール Webデザイン ブラウザ Flash RIA Microsoft オープンソース Windows Vista モバイル プログラミング言語 Firefox Mozilla Google iPhone 3G OS Chrome WebKit iPhone HTML JavaScript マイクロソフト CSS Database リファレンス クラウド Safari Windows 7 Mac OS X アプリケーション Webサービス Tips Windows UI 脆弱性 開発環境 仮想化 Ajax 小技 Windows XP セキュリティ データベース ソフトウェア開発 Apple
  • 話題のタグを見る »