★ Flex を使って Scalable Vector Graphics とビットマップを描画する
from: http://www.ibm.com/developerworks/jp/web/library/wa-svgbitmap/
Flex を使って Scalable Vector Graphics とビットマップを描畫する
?
Sandeep Malik, Tech Lead, IBM ?概要：?SVG (Scalable Vector Graphics)
はグラフィックスの領域で最も重要な技術の 1 つであり、Adobe Flash Player とそのバリエーションである Flex は SVG
を完全にサポートしています。SVG は最も重要な技術である一方で、SVG を使って複雑な図形を作成するのは簡単ではありません。さらに SVG
でビットマップ?データを扱うためには、マトリックス回転や透明度などの複雑な概念を理解しなければなりません。そこで Flex
が登場します。この記事では Flex で扱う SVG
の魅力的な世界を紹介します。ここで紹介する方法を利用すれば、単純にベクター描畫することで、カスタム?グラフィックスや魅力的で視覚に訴えるコンポー
ネントを作成することができます。
日付:? 2009年 3月 17日?? レベル: ?初級?この記事の原文:? 英語??
はじめに
グラフィックスの世界では、描畫に使われる技術として 2 つの主要な技術が支配的です。その第 1
は何と言ってもビットマップ描畫です。ビットマップ描畫は何十年も以前からあり、またビットマップに関する技術やツールは非常に成熟したものになっていま
す。畫像の表示フォーマットには、jpeg、png、bmp
など、多くの種類があります。デザイナーは高度な支援ツールを利用することで印象的で技巧を凝らした畫像を生成することができ、それらを Web
サイトで使用すると Web サイトの外観を斬新なものにすることができます。Adobe? Photoshop や Image Editor
などのツールには高度なアルゴリズムが多數用意されており、それらを畫像のビットマップに適用すると畫像全體のルック?アンド?フィールを変更することが
できます。この手法は広く採用されており、ビットマップ畫像はすべての Web
サイト設計での重要な一部となっています。しかし現狀では、ビットマップによる描畫には 2 つの大きな欠點があります。第 1
に、ビットマップは靜的な畫像であり、何も動きを追加することができません。(gif
フォーマットを使ってアニメーションを実現することはできますが、こうしたアニメーションの大部分は事前に定義されていて、ユーザーの操作に応じて変わる
アニメーションにはなっていないのが一般的です。) 第 2
に、ビットマップで畫像の美しさを保つことができるのは、ある特定の解像度の場合に限られるか、よくても何通りかの解像度に限定されます。いったん解像度
が変更されると、例の見苦しい長方形 (ピクセルの四角)
が現れ始め、それによって畫質が低下し、畫像の光沢まで失われてしまいます。従ってビットマップは素晴らしい畫像を生成することができるものの、靜的で畫
面解像度が固定されている特定の場合にしか使用することができません。
?
Web コンテンツを動的にする要求が高まるにつれ、Web
コンテンツの畫像は必然的にユーザーと「対話」したりユーザーの操作に「応答」したりする必要が出てきます。つまり畫像は振る舞うことができる必要が出て
くるのです。SVG (Scalable Vector Graphics) はまさにそれを備えています。「Scalable Vector
Graphics」という言葉が何を意味するのかを理解することが重要です。Vector Graphics
は、描畫される畫像が色の付いたピクセルの集合ではないことを意味します。ベクター描畫は鉛筆による描畫と似ています
(鉛筆による描畫では、ある點から別の點へと鉛筆を動かしながら直線や曲線、長方形、楕円などを描きます)。ベクター描畫では最終的に、閉じた領域をさま
ざまな色で塗りつぶします。従ってベクター描畫ではパスの概念が重要になります。パスには、畫面解像度に依存しないという利點があります。一般的に、ある
単位スケールでパスが作成された後、ユーザーが要求する任意の解像度でグラフィックス全體が描畫されます。そのため、極端な値にまで解像度が変更されても
畫質は変わりません。ベクター描畫を「スケーラブル」と呼ぶ理由は、描畫のプラットフォーム (通常は Web ブラウザー)
でサポートされている任意の解像度まで畫像を拡大縮小することができるためです。
?
ただし SVG にも制約があります。SVG
は比較的新しい技術であり、ビットマップと同じレベルの細かさでグラフィックスを生成できるほどツールが成熟しているわけではありません。また、技巧的な
畫像を作成するために複雑なパスを定義しようとすると、容易ではありません。そのため、今のところ SVG
による描畫は主に簡単な円や長方形などに限定されていますが、狀況は改善されつつあり、新興の技術では SVG
を完全にサポートすることに主眼が置かれており、ツールはより高度なものになりつつあります。
?
この記事では SVG の詳細について、さらに、ビットマップと比べた場合の SVG の利點について説明します。次に SVG
をサポートするツールと技術の現狀について、オープンソースのツールと技術を中心に説明します。続いて、ビットマップと SVG
の両方の優れた部分を組み合わせ、技巧的でしかも「生き生きとした」グラフィックスを作成する方法について説明します。そして最後に、そうしたグラフィッ
クスの一例を示し、そのソースコードについて解説します。
?
SVG の特徴の紹介
最近、SVG が勢いを増してきました。Web サイトの設計者達はビットマップに代わる強力な選択肢として SVG
を検討するようになっています。RIA (Rich Internet Application)
に対応したほとんどすべての技術は何らかの形でベクター?グラフィックスをサポートしており、また実際 SVG
にはビットマップに勝るいくつかの利點があります。その第 1 として、SVG はテキスト?ベースの表現です。SVG 畫像の記述全體は W3C
で標準化された XML フォーマットで表現されます。そのため SVG
畫像は「人間が読むことができる」ようになっており、またテキスト?エディターを使って容易に変更することができます。SVG
ファイルの中にあるすべてのパスは、XML を構文解析することで、あるいは XQuery や XPath
などの高度な手法を使うことで見つけることができます。そのため SVG はユーザーの要求に十分に対応することができます。
?
一例として、皆さんが虎の SVG 畫像を作成しており、ユーザーがボタンをクリックすると虎の目がまばたきするようにしたい、としましょう。ビットマップでは通常、お互いに重なる 2
つか 3 つの畫像を埋め込むことで「まばたき」の効果を実現します。しかし SVG では、虎の目の形を描畫するパスを見つけ、このパスを別の色で塗り直すことで虎が目を閉じたように見せることができます。さらに優れた方法では、SVG
エディターの中で、開いた目と閉じた目という両方の領域 (領域とは閉じたパスのことです) を描畫し、閉じた目の領域を透明にしておくことができます。虎に「まばたき」をさせるためには、対応する XML の中で両方の領域とパスを見つけ、2
つの領域の間で透明度を切り換えます。すると、ユーザーの操作によって動作が変わる対話型の SGV 畫像が得ることができます。
パスを操作すると、他にもさまざまな対話動作を実現することができます。実際、SVGを利用すると、マウスオーバー、マウスアウト、クリックなどを含む sciplet (ECMAScript) を埋め込むことができます。SVG
はこうした特徴を持っているため、グラフィックス技術として真剣に検討する価値があり、またビットマップに比べて次の 2 つの點で優れています。
SVG 畫像は純粋なテキストとして表現できるため、gzip のようによく知られたテキスト圧縮アルゴリズムを使って圧縮することができます。そのようにして圧縮されたフォーマットは .svgz
ファイルで表現され、非圧縮フォーマットの .svg ファイルとは異なります。
?
SVG をサポートするオープンソースのツールと技術
SVG 畫像の設計をサポートするオープンソースのツールや技術には、優れたものが數多くあります。ここで取り上げる Inkscape (「參考文獻」
を參照) は、そうしたツールの 1
つであり、無料で使用することができ、また印象的な蕓術作品を作成するための優れたプラットフォームでもあります。Inkscape を利用すると畫像を
SVG フォーマットで保存できるだけではなく、他のさまざまなフォーマットでも畫像を保存することができます (例えば XAML
(Microsoft? XAML)、PS (ポストスクリプト)、GPL (GIMP Palette)、ODG (OpenDocument
Drawing) など)。また畫像をビットマップ?ファイルとしてエクスポートすることもできます。Inkscape
には豊富な機能を持つエディターが用意されており、グラデーションやベジエ曲線、3D
フィルターなどを使った技巧的な畫像を作成することができます。SVG のファンの人達はぜひとも Inkscape を調べてみてください。
今日の最新技術のほとんどはベクター描畫をサポートしています (Microsoft の Silverlight、Sun? の
JavaFX、OpenLazlo、Adobe Flex (つまり Flash) など)。この記事では、Flex で提供されているサポートに焦點を絞ります。Flex は Adobe の Flash Player
のエンタープライズ指向のバリエーションであり、RIA 対応の Web サイトのための強力なプラットフォームでもあります。Flex
は大部分の機能を Flash から継承しているため、ベクター描畫のサポートは非常に充実しています。Flex のすべてのクラスは Sprite 基底クラスを継承しており、內部にグラフィック?オブジェクトが組み込まれています。このグラフィック?オブジェクトを使ってスプライトに対してベクター描畫を行うことができます。例えば半徑 5 の円を描畫するコードを見てください。
リスト 1. ベクター描畫の基本を示す例
| <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" creationComplete="onCC()"><mx:Script><![CDATA[private function onCC() : void {graphics.clear();graphics.lineStyle(2,0xffff00);graphics.drawCircle(100,100,5);}]]></mx:Script> </mx:Canvas> |
この場合は Canvas を継承し (Canvas は Sprite を継承します)、Canvas によって creationComplete イベントが起動されると円が描畫されます。graphics.clear() 呼び出しに注目してください。新しい図形を描畫する前に前の図形をクリアーすることが重要です。そうしないと新しい図形が古い図形の上に描畫されてしまい、お互いの上に重複して再描畫するため、処理が遅くなる原因になります。graphics.lineStyle() は描畫に使用する線のスタイルを設定します。最後に、graphics.drawCircle()
は中心が (100,100) で半徑が 5 の円を描畫します。実際、こんなに簡単なのです。Flex
は形狀の結合または交差もサポートしています。例えば 2 つの円があり、この 2 つの円の交差していない部分のみを塗りつぶしたいとします。リスト 2
はその方法を示しています。
リスト 2. 2 つのベクター図形の交差または結合を示す例
| <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" creationComplete="onCC()"><mx:Script><![CDATA[ private function onCC() : void {graphics.clear();graphics.lineStyle(1,0,0);graphics.beginFill(0xcccccc);graphics.drawCircle(100,100,50);graphics.drawCircle(110,100,50);graphics.endFill();}]]></mx:Script> </mx:Canvas> |
?
図 1 は、この畫像をブラウザーで表示した様子を示しています。
図 1. ブラウザーに表示したベクター畫像これら以外にも graphics クラスは多くの便利なメソッドを公開しており、それらを使用することで他の基本形狀
(長方形、曲線、角丸長方形、線、三角形など) を描畫することができます。これらは Web
サイトのデザインを行うアプリケーション開発者の基本的な要求を満たしてくれるはずです。ただしそうした基本形狀だけでは、本格的なベクター描畫に期待さ
れる機能としては不十分かもしれません。そうした場合には、より高度に SVG
をサポートする他のツールやフレームワークを使用する必要があります。Degrafa (「參考文獻」
を參照) はそうした優れたオープンソース?フレームワークの 1
つで、このフレームワークを利用すると完全に対話型の複雑な畫像を作成することができます。まもなく登場する Flex の新バージョンである Flex
4.0 でも、技巧的な SVG 描畫をフレームワーク?レベルでサポートすることになっています。ただしそうした新機能の欠點として、新しい API
を學ばない限りそれらの機能を利用することができません。しかしもう 1
つ、ビットマップ描畫とベクター描畫の両方を活用する一種の中間的な方法があります。次のセクションではその方法について説明します。
?
Flex でビットマップと SVG の両方を使う
一例として、計器コンポーネントを作成したいとしましょう。このコンポーネントには「正常」、「警告」、「危険」という 3
つのゾーンがあります。全體のゾーンの範囲は 210 度から -30 度までです。この範囲を 3 つのゾーンに分割します。「危険」ゾーンの範囲は
210 度から 130 度、「警告」ゾーンの範囲は 130 度から 50 度、そして最後に「正常」ゾーンの範囲は 50 度から -30
度です。下記の図はこの計器コンポーネントを示しています。
図 2. 計器コンポーネント
これは靜的な畫像であり、さまざまなグラデーションや塗りつぶしがあります。しかし、この計器コンポーネントに「命」を吹き込む必要があるため、何
らかのイベントに基づいて何かのプロセスの現狀を示す針を追加します。この針が何らかのプロセスの現狀を示すにはユーザーからの入力が必要であり、計器コ
ンポーネントはユーザーからの入力に基づいて、針が適切なゾーンを指すようにします。こうした種類の対話動作をビットマップのみを使って実現しようとする
と、不可能ではありませんが困難です。しかしベクター描畫を使用すれば、こうした対話動作を実現することができます。まず、ベクター描畫を使って針をコー
ディングします。次に UIComponent 基底クラスを継承し、updateDisplayList() メソッドをオーバーライドしてカスタムのベクター畫像を描畫します。
リスト 3. 針コンポーネントの基本部分の設計
| <?xml version="1.0" encoding="utf-8"?> <mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![CDATA[private var _angle : Number;// this angle must range from 210 deg to -30 deg:public function set angle(value : Number) : void {if(value > 210 || value < -30) throw new Error("Unsupported Angle Value "+value);_angle = value;inited = true;invalidateDisplayList();}private var inited : Boolean;public var center : Point;public var radius : Number;public function get angle() : Number {return _angle;}]]></mx:Script></mx:UIComponent> |
?
針コンポーネントは針を表示する前に、必要な 3 つの変數を宣言します。その 3 つの変數とは、angle (角度)、center (中心)、radius (半徑) です。また、値を設定する際には有効な角度の範囲もチェックします。最後に invalidateDisplayList() を呼び出して再描畫を行います。では updateDisplayList() メソッドを調べ、このメソッドで何が行われているかを見てみましょう。
リスト 4. 針コンポーネントのためのメインの描畫コード
| override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {// we need to first convert the angle to a convenient value, since flex follows a different angle convention:var ang : Number = -angle*Math.PI/180;graphics.clear();graphics.beginGradientFill(GradientType.RADIAL,[0,0xcccccc],[1,1], [20,200],null,SpreadMethod.REFLECT);graphics.drawCircle(center.x,center.y,30);graphics.endFill();if(inited) { graphics.lineStyle(10,0,1,false,"normal");graphics.lineGradientStyle(GradientType.LINEAR,[0,0xcccccc],[.5,.5], [20,200],null,SpreadMethod.REFLECT,"rgb",.5);graphics.moveTo(center.x,center.y);var p : Point = getCoordinates(ang);graphics.lineTo(center.x + p.x,center.y + p.y);graphics.lineStyle(1,0,0);graphics.moveTo(center.x,center.y);} |
?
角度が 30 度の場合、針コンポーネントは図 3 のようになります。
図 3. 角度が 30 度の場合の針コンポーネント
あとはこのベクター畫像とビットマップとを重ね合わせればよいだけです。すると計器コンポーネントが得られるはずです。下記のコード?スニペットを見てください。
リスト 5. 計器コンポーネント
| <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="article2.components.*" backgroundColor="0xffffff"><mx:FormItem label="Change the angle" x="20" y="10"><mx:HSlider id="slider" minimum="-30" maximum="210" value="0" liveDragging="true" change="needle.angle = slider.value"/></mx:FormItem><mx:Canvas y="50" backgroundImage="article2/images/gauge_skin.PNG" width="362" height="310" id="gauge"/><components:Needle id="needle" center=" {new Point(gauge.x+gauge.width/2,gauge.y+gauge.height/2)}" radius="100"/></mx:Application> |
図 4 は上記のコードの実際の動作を示すスナップショットです。
図 4. 計器コンポーネントの実際の動作
これで完成です。実際に動作する計器コンポーネントが用意できました。実際に動作する swf ファイルは下記の「ダウンロード」セクションからダウンロードすることができます。
?
まとめ
この記事では SVG とビットマップについて簡単に説明し、SVG を利用することで靜的なビットマップにユーザーとの対話動作を追加する方法を見てきました。Flex では (backgroundImage
プロパティーを設定することで)
表現力豊かなビットマップを非常に容易に埋め込むことができ、ベクター畫像を使うコンポーネントの追加は、それよりもさらに容易です。ここで紹介した例に
よってアプリケーションの設計や開発に新しい可能性が生まれ、従來のビットマップ畫像を使いながら Flex を使って SVG
のサポートを追加することで、ビットマップと SVG の両方の優れた部分を最高の組み合わせで利用することができます。
?
ダウンロード
| .swf file created in this article | Download.zip | 279KB | HTTP |
?
參考文獻
學ぶために
- Scalable Vector Graphics に関する W3C の仕様を見てください。
- developerWorks の Technical events and webcasts で最新情報を入手してください。
製品や技術を入手するために
- さまざまなプラットフォームで使用できる Inkscape について學び、また Inkscape をダウンロードしてください。
- Degrafa フレームワークの詳細情報を入手してください。
- developerWorks から直接ダウンロードできる IBM ソフトウェアの試用版を利用して皆さんの次期開発プロジェクトを構築してください。
議論するために
- developerWorks blogs から developerWorks のコミュニティーに加わってください。
著者について
Sandeep
Malik は IBM Cognos NOW! の技術リーダーであり、インドの Pune にある India Software Labs
に勤務しています。彼は Cognos NOW! のための新世代 UI の設計やアーキテクチャーのフェーズに、また OBI (Operation
Business Intelligence)
エンジンのメモリーやリアルタイム?ストリーミングの業務に従事してきています。彼は本格的なグラフィックスやチャート?ライブラリー、クライアントサイ
ド?ストリーミング、ノンブロッキング I/O、そして非同期システム全般を幅広く経験してきています。IBM
に入社する前にはネットワーク?セキュリティーの分野で働いており、ネットワーク?トラフィックの分布を変化させるパターン
(ボットネット、ワーム?スキャンなど) の分析をしていました。また以前勤務していた會社の 1 つでサーブレット 2.4
仕様の実裝にも従事していました。彼は時間のあるときにはクリケット観戦を楽しみ、生まれ変わったら自分自身もクリケット選手になりたいと思っています。
轉載于:https://www.cnblogs.com/ketutyou/archive/2011/12/31/2309031.html
總結
以上是生活随笔為你收集整理的★ Flex を使って Scalable Vector Graphics とビットマップを描画する的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于一道数据库例题的解析。为什么σ ag
- 下一篇： Ubuntu20编译OpenDDS-3.