★ 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 つの点で優れています。

1. 画面の解像度に依存しないスケーラブルな画像を得ることができます。
   
2. 同じ効果を得るために必要な画像ファイルのサイズはビットマップよりも SVG の方が小さくなります。
   

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
仕様の実装にも従事していました。彼は時間のあるときにはクリケット観戦を楽しみ、生まれ変わったら自分自身もクリケット選手になりたいと思っています。