ページ)ビットマップ画像、ベクタ・グラフィックス、3Dグラフィックスなどを扱うWPFのUI要素と、ブラシ、変形、ビットマップ効果などのグラフィックス関連機能を解説。第1回で説明したように、WPFでは、コントロール、メディア、文書など、さまざまなUI要素を統一的に扱うことができる。メディアだけを見ても、ビットマップ画像、ベクタ・グラフィックス、3Dグラフィックスなど、さまざまなメディアを対象としている。今回は、このようなメディア関連のUI要素と、ブラシ、変形、ビットマップ効果などグラフィックスに関連する項目について説明していく。■メディア関連要素WPFでは、以下のようなメディアを統一的に取り扱える。動画/音声グリフ(=文字の描画)3Dグラフィックス各メディアの話に入る前に、1つ補足をしておこう。●補足:FrameworkElement派生クラスとDrawing派生クラスWPFには、FrameworkElementクラス(System.Windows名前空間)から派生するものとDrawingクラス(System.Windows.Media名前空間)から派生するものの2系統のクラス群が存在する。FrameworkElementクラスは、UI要素として利用する分には非常に便利なレイアウトやスタイルなどの機能を有するが、これらの機能は単に描画を行いたいだけの場合には機能過多で、性能上の問題となることもある。そこで、レイアウトなどの機能を持たず、描画機能だけを提供する軽量にベクタ・グラフィックスを描画するクラスとして提供されているのがDrawingクラスである。1に示すように、3Dグラフィックス以外は、FrameworkElementクラスから派生するものとほぼ1対1に、Drawingクラスから派生するクラスが存在する。メディア関連のFrawemorkElement派生クラスとDrawing派生クラス直接利用する機会が多いのはFrameworkElementから派生する側のクラス群だろう。一方で、Drawingクラスは以下のクラスで利用する。Drawingオブジェクトを画像として利用。Drawingオブジェクトをブラシ(背景の塗りつぶしなど)として利用。軽量なVisualオブジェクト(=WPFのUI要素の共通基底クラスのオブジェクト)を生成する。DrawingクラスはFreezableクラス(第7回のコラム参照)から派生しているため、固定化(frozen)してあればマルチスレッドで利用可能である。グラフィックス関係のオブジェクトを複数のスレッドから参照するなら、Drawingクラスを使う必要がある。差し当たって、「Drawingクラスから派生するクラス群は高速な描画が必要な際に使う」とだけ覚えておけばいいだろう。以下の各メディアの解説では、利用頻度の高いFrameworkElementクラスから派生するUI要素についてのみ説明する。●メディア:幾何学図形(=ベクタ・グラフィックス)Shapeクラス(System.Windows.Shapes名前空間)から派生するUI要素によって、四角形(=矩形)やだ円などの幾何学図形を描画できる(以下、これらのUI要素を総称して「Shape要素」と呼ぶ)。1に示すように、拡大しても荒くならない。Shape要素の拡大この例では、<Ellipse>(だ円)要素を2/5/10/30倍に拡大している。Shape要素には以下のようなUI要素が存在する(いずれもSystem.Windows.Shapes名前空間)。角の丸い四角形も描画可能。2点間をつなぐ線分を描画する。与えられた複数の頂点をつなぐ多角形を描画する。与えられた複数の頂点をつなぐ折れ線を描画する。後述する「ジオメトリ」を使って任意の幾何学図形を描画する。注意点として、<Rectangle>要素や<Ellipse>要素では、斜め向きの図形は作れない(辺や長軸/短軸がx軸/y軸と平行なものだけを作れる)。斜め向きにしたければ、さらに、後述する変形(=RenderTransformプロパティなど)を用いて回転処理を掛ける。○塗りつぶしと枠線すべてのShape要素に共通して、塗りつぶしと枠線の描画方法を設定できる。Fillプロパティによって塗りつぶしに使うブラシを、Strokeプロパティによって枠線に使うブラシを指定する。StrokeThicknessプロパティのように、Strokeから始まるいくつかのプロパティを用いて枠線の表示方法を変更できる。○<Polyline>要素/<Polygon>要素の塗りつぶし判定<Polyline>要素および<Polygon>要素では、線の引き方によっては図形の内側/外側(=塗りつぶすべき領域かどうか)の判定に迷う場合がある。以下のようなXAMLコードによって描ける五芒星(ごぼうせい)がその例の1つとなる。2に示すような判定方法が存在する。ある点を始点として半直線を伸ばしたときに、図形の枠線とその半直線が何回交わっているかによって図形の内側/外側を判定する。FillRuleプロパティが「EvenOdd」の場合には交点が奇数のときだけを、「NoneZero」の場合には0回以上のときを内側と見なす。<Polygon>要素のFillRuleプロパティ○<Path>要素とジオメトリ<Path>要素の場合、任意形状の図形を描けるが、この形状に関する情報をWPFでは「ジオメトリ」と呼び、Geometryクラス(System.Windows.Media名前空間)によって表現する(詳細は後述)。<Path>要素では、Dataプロパティにジオメトリを指定する。XAMLコード中でジオメトリを簡潔に記述するためのパス・マークアップ構文と呼ばれるミニ言語があり、多くの場合、このミニ言語を利用して<Path>要素のDataプロパティを記述する(パス・マークアップ構文に関しても後述)。3に示すような図形を描くことができる。画像の表示には<Image>要素(System.Windows.Controls)を利用する。画像自体はImageSourceクラス(System.Windows.Media名前空間)のオブジェクトで表現され、これを<Image>要素のSourceプロパティに与えることでさまざまな画像を画面上に表示する。ImageSourceクラスから派生するクラスには、大きく分けると以下の2つがある。Drawingオブジェクトを画像として扱う。主な用途としては、GeometryDrawingオブジェクトを与えることでベクタ・グラフィックスを表現する。後述するように、さらに細かく分かれる。D3DImageクラス(System.Windows.Interop名前空間)によって、Direct3DのサーフェスをWPFウィンドウ中に埋め込むこともできる。○ビットマップ画像BitmapSourceクラスから派生するクラスがいくつかあり(いずれもSystem.Windows.Media.Imaging名前空間)、用途によって使い分ける。ファイルやリソースからの画像の読み込みを想定。プログラム中で動的に画素の読み書きができるビットマップ。任意のVisualオブジェクト(=WPFのUI要素の共通基底クラスのオブジェクト)をレンダリングしてビットマップ化するために利用する。BitmapSourceクラスのCreate静的メソッドを用いて、バイト配列から画像を生成できる。○画像ファイルの読み込みXAMLコード中では、以下のように、<Image>要素のSourceプロパティに画像のパスを直接指定できる。URIという記法を用いる。4に示すように、アセンブリ・リソース(連載第4回参照)から画像が読み込まれる。XRとしてJPEG規格の一部となっている)形式に対応していて、これらの形式なら、前述の<Image>要素のSourceプロパティに対するパス指定で読み込むことができる。BitmapEncoderクラスおよびBitmapDecoderクラスや、それらから派生する各種XxxBitmapEncoder/XxxBitmapDecoderクラス(いずれもSystem.Windows.Media.Imaging名前空間)を用いることで、明示的に画像の読み込み/保存が行える。JPEG形式で画像を保存したければ、JpegBitmapEncoder/JpegBitmapDecoderクラスを利用する。●メディア:動画/音声<MediaElement>要素(System.Windows.Controls名前空間)を用いて動画や音声などのメディアを再生できる。10でサポートされているすべての種類のメディアをサポートする。<MediaElement>要素を使ったメディア再生は非常に簡単で、以下のように、Sourceプロパティに再生したい動画や音声などのメディアのURIを指定するだけでよい。/><MediaElement>要素のSourceプロパティに対する、動画のURIの指定(XAML)ただし、相対URIを指定した場合の挙動が<Image>要素のSourceプロパティとは異なる点に注意が必要である。<MediaElement>要素のSourceプロパティに相対URIを指定した場合、(アセンブリ・リソースではなく)アプリケーションの実行可能形式ファイル(=.EXEファイル)からの相対パスで外部ファイルを参照する。●メディア:グリフ<Glyphs>要素(System.Windows.Documents名前空間)によって、低水準な文字描画を行うことができる。<TextBlock>要素などと比べて記述が煩雑になる半面、細やかな描画制御が行える。日本語環境では、縦書きの文字描画を正しく行うために<Glyphs>要素を用いることが多い。●メディア:3Dグラフィックス<Viewport3D>要素(System.Windows.Controls名前空間)によって、3DグラフィックスをWPFウィンドウ中に埋め込むことができる。2に示すように、3Dグラフィックスの中にコントロールを描画することも可能である。3Dグラフィックス中にコントロールを表示する例ただし、3Dグラフィックスといっても、(ゲーム用の開発基盤である)Direct3DやXNAの置き換えを狙ったものではないので注意が必要である。CAD的な編集能力を持っているわけではない。Max)で編集した3DモデルをXAML形式にエクスポートしたり変換を掛けたりしてWPFに取り込む必要がある。WPFは、イベント駆動が前提、すなわち、何かイベントがあるまで画面を再描画しないという前提の下でパフォーマンスが最適化されている。ゲームのように、高頻度で再描画を行うようなものには適していない。以上、メディア関連要素について説明した。次のページでは、ブラシ、変形、ビットマップ効果などグラフィックスに関連する項目について説明する。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。