★　Flex を使って Scalable Vector Graphics とビットマップを描画する-白红宇

★　Flex を使って Scalable Vector Graphics とビットマップを描画する

阅读量：5125 次

发布时间：2019-06-13

本文共 9463 字，大约阅读时间需要 31 分钟。

from:

Flex を使って Scalable Vector Graphics とビットマップを描画する

, 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 が勢いを増してきました。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 の方が小さくなります。

SVG 画像は純粋なテキストとして表現できるため、gzip のようによく知られたテキスト圧縮アルゴリズムを使って圧縮することができます。そのようにして圧縮されたフォーマットは .svgz

ファイルで表現され、非圧縮フォーマットの .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 の円を描画するコードを見てください。

この場合は Canvas を継承し (Canvas は Sprite を継承します)、Canvas によって creationComplete イベントが起動されると円が描画されます。graphics.clear() 呼び出しに注目してください。新しい図形を描画する前に前の図形をクリアーすることが重要です。そうしないと新しい図形が古い図形の上に描画されてしまい、お互いの上に重複して再描画するため、処理が遅くなる原因になります。graphics.lineStyle() は描画に使用する線のスタイルを設定します。最後に、graphics.drawCircle()

は中心が (100,100) で半径が 5 の円を描画します。実際、こんなに簡単なのです。Flex

は形状の結合または交差もサポートしています。例えば 2 つの円があり、この 2 つの円の交差していない部分のみを塗りつぶしたいとします。リスト 2

はその方法を示しています。

図 1 は、この画像をブラウザーで表示した様子を示しています。

これら以外にも graphics クラスは多くの便利なメソッドを公開しており、それらを使用することで他の基本形状

(長方形、曲線、角丸長方形、線、三角形など) を描画することができます。これらは Web

サイトのデザインを行うアプリケーション開発者の基本的な要求を満たしてくれるはずです。ただしそうした基本形状だけでは、本格的なベクター描画に期待さ

れる機能としては不十分かもしれません。そうした場合には、より高度に SVG

をサポートする他のツールやフレームワークを使用する必要があります。Degrafa (「」

を参照) はそうした優れたオープンソース・フレームワークの 1

つで、このフレームワークを利用すると完全に対話型の複雑な画像を作成することができます。まもなく登場する Flex の新バージョンである Flex

4.0 でも、技巧的な SVG 描画をフレームワーク・レベルでサポートすることになっています。ただしそうした新機能の欠点として、新しい API

を学ばない限りそれらの機能を利用することができません。しかしもう 1

つ、ビットマップ描画とベクター描画の両方を活用する一種の中間的な方法があります。次のセクションではその方法について説明します。

一例として、計器コンポーネントを作成したいとしましょう。このコンポーネントには「正常」、「警告」、「危険」という 3

つのゾーンがあります。全体のゾーンの範囲は 210 度から -30 度までです。この範囲を 3 つのゾーンに分割します。「危険」ゾーンの範囲は

210 度から 130 度、「警告」ゾーンの範囲は 130 度から 50 度、そして最後に「正常」ゾーンの範囲は 50 度から -30

度です。下記の図はこの計器コンポーネントを示しています。

これは静的な画像であり、さまざまなグラデーションや塗りつぶしがあります。しかし、この計器コンポーネントに「命」を吹き込む必要があるため、何

らかのイベントに基づいて何かのプロセスの現状を示す針を追加します。この針が何らかのプロセスの現状を示すにはユーザーからの入力が必要であり、計器コ

ンポーネントはユーザーからの入力に基づいて、針が適切なゾーンを指すようにします。こうした種類の対話動作をビットマップのみを使って実現しようとする

と、不可能ではありませんが困難です。しかしベクター描画を使用すれば、こうした対話動作を実現することができます。まず、ベクター描画を使って針をコー

ディングします。次に UIComponent 基底クラスを継承し、updateDisplayList() メソッドをオーバーライドしてカスタムのベクター画像を描画します。


           
            
              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; } ]]>

針コンポーネントは針を表示する前に、必要な 3 つの変数を宣言します。その 3 つの変数とは、angle (角度)、center (中心)、radius (半径) です。また、値を設定する際には有効な角度の範囲もチェックします。最後に invalidateDisplayList() を呼び出して再描画を行います。では updateDisplayList() メソッドを調べ、このメソッドで何が行われているかを見てみましょう。

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 のようになります。