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 折れ線の描画例
- 0人の推薦記事
- 0人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
- 特集: dojoの広大な門をたたく (8件)
- 今日のトップ記事
- 2日前
- 4日前
- 6日前
- 7日前
- ホワイトペーパー
- 読者投票
今、使っているマシンのOSは?
- 話題のタグ
Windows
Apache
SOA
フレームワーク
開発環境
リファレンス
Mozilla
Leopard
ブラウザ
MySQL
Firefox
Linux
オープンソース
Webデザイン
Ruby
Eclipse
Java
Off Topic
Google
HTML
Safari
iPhone 3G
Database
Mac OS X
XHTML
Solaris
Tips
C/C++
Apple
Internet Explorer
iPhone
Flash
CSS
Ajax
Adobe
PHP
JavaScript
イロハ
仮想化
Firefox 3
小技
ライブラリ
RIA
iPod touch
Python
Opera
Microsoft
server
Webアプリケーション開発
入門
話題のタグを見る »
MS、Vistaとの互換性をチェックできる「Compatibility Center」リリースへ
「似非」SOAを見破る10の方法
Firefox 3のアドオンやテーマ管理を容易にする
openSUSE 11.0を試してみた
フォトレポート:世界各国の優秀な技術者がパリに集結--Imagine Cup 2008世界大会
バッチ処理でデータベース活用:4つの課題と5つの解決ポイント
Rubyでどう書く?:RubyでWord文書を作成する
DELL連載第4回〜「Microsoft System Center」
今知るべき仮想化情報
ZDNet Japan Green IT
Techno Exchange
「未来の、その先」をどう提言していくか