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

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