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件)
- ホワイトペーパー
- 企画特集
SOA、BPM、SaaS −今、企業に必要なこと
セキュリティ&ユーザ事例【SIer Club】
御社のログ活用しませんか!?
パンデミック対策特集
今注目の「サジェスト検索」−デモ掲載中
【徹底対談】運用管理ツールの賢い使い方
インターネット上の悪意を未然に防ぐには?
ESBでIT投資の無駄を劇的に解消する
ロリポップ!がリニューアル
ストレージメディア特設サイト開設
そのストレージで仮想化に対応できますか?
中小企業のセキュリティリスクとは?
集積度も性能も、業界最高水準のブレードPC
仮想環境を実現するソリューション特集
◆エン・ジャパン厳選求人☆毎週更新◆
- ■ストレージ容量50%削減保証■
- エンタープライズにおけるSUSEの強み
- サーバー監視・運用のコストを削減するには
- サービス・ドリヴン・データセンター
- 話題のタグ
Opera
Microsoft
脆弱性
JavaScript
Mac OS X
UI
オープンソース
Apple
Windows 7
Firefox 3
Linux
小技
Webサービス
SOA
仮想化
Mozilla
モバイル
Chrome
Off Topic
開発環境
Firefox
iPod touch
OS
Tips
PHP
Flash
Safari
ブラウザ
Windows
インストール
iPhone 3G
プログラミング言語
アプリケーション
データベース
Java
Adobe
Webデザイン
WebKit
Google
CSS
HTML
RIA
Database
Ajax
Windows Vista
リファレンス
Internet Explorer
ソフトウェア開発
セキュリティ
iPhone
話題のタグを見る »
Windows 7はLinuxへの切替が簡単:注目の仮想ディスクフォーマット「VHD」
iPhone OS 3.0で変わった「絵文字」
OSSのクラウド基盤「Eucalyptus」を使う(4)--インストール〜ノード構築
俳優経験者が指南する「人前で上手く話すためのティップス10選」
「うるまでるびペイント」登場:絵は上手下手ではなく制作過程に楽しみが
待てば回路の日和あり--「iPhone 3GS」発売、しかし――