編集部注:Silverlightそのものについて詳しく知りたい読者は、本稿と併せて特集「Silverlightは次世代のJavaScriptフレームワーク?」もご参照ください。
前回「SilverlightならWeb上で高精細な動画再生も簡単?」では、Silverlightの一番の特徴となる高精細(HD)な動画の再生機能をオンラインのサンプルとともに紹介しました。第3回となる今回そして、次回第4回では、Silverlightのグラフィックスに焦点を当てて解説していきます。
Silverlightのグラフィックスは多くの機能を持っており、それらをうまく活用することで素晴らしくリッチなアプリケーションを生み出すことができますが、大きく以下のような種類に分けることができます。
従来のアプリケーションは、イメージやビデオなどのグラフィックスをテキストとはまったく異なるオブジェクトとして扱っていました。一方、SilverlightやWPFでは、同じベクターデータとして扱うことで、拡大・縮小や変形、組み合わせなども自由に行い、表現力を飛躍的に高めているということはすでに周知のことです。
編集部注:ベクターデータについて詳しく知りたい読者は、「いまさら聞けないSVG、なぜ知られていないのか?」をご参照ください。
今回説明するグラフィックスに関する事柄がすべての根幹を成すといっても過言ではありませんので、じっくりと解説していきたいと思います。さらに、次回では、いよいよアニメーションを解説することになりますが、そのための基本技術も今回の中に含まれますので、ぜひとも併せて参考にしていただけると幸いです。
それでは、グラフィックス編の前編である第3回を見ていきましょう。
SilverlightのXAMLは多くの図形をサポートしており、それら自由に組み合わせて、複雑な図形さえも表現できます。その中で一番ベースとなる「基本図形(以下、Shapeオブジェクト)」は以下の6種類です(以下リストはインデックスになっています)。
図形に関しては説明不要であると思いますが、個人的にこの中で一番使えると思っているのが「Path」です。Pathはそのままですが、形がありません。パス言語に基づいて線(パス)を結んでいって形を作るので、好きな図形を思いのままに実現できます。
図形描画に詳しい方であれば、すでによく知っていて使いこなしているかと思いますが、このPathを使用するにはデザインツールを使うことをおススメします。Silverlightには、「Expression Studio」(※1)という専用のデザインツール群がありますので、Silverlightのデザイン開発にはこちらを活用してください。
※1:Expression Studioには正式リリースされているバージョン1がありますが、Silverlightに未対応ですので、Expressionを使用してSilverlightを開発したい場合はExpression Studio 2を使用することになります(2008年3月の執筆時点では、Expression Studio 2 Betaが最新バージョンです。参考「Microsoft、『Expression Studio 2』のβ版をリリース」)。
これらShapeオブジェクトにはそれぞれの描画に応じた多くのプロパティを持っていますが、共通のプロパティも存在します。それが、以下の表1のプロパティです。
プロパティ | 詳細 | デフォルト値 | |
---|---|---|---|
Stroke | シェイプのアウトラインをどのようにペイントするかを定義。値には色やBrushを指定 | null | |
StrokeThickness | シェイプのアウトラインの幅を定義 | 0 | |
Fill | シェイプの塗りつぶしをどのようにペイントするかを定義。値には色やBrushを指定 | null | |
これらの共通プロパティ以外は、それぞれのShapeオブジェクトの描画の形を指定するプロパティとその位置を指定するプロパティがほとんどです。それらについては、どう描画したいかによって使い方が大きく変わる場合がありますので、デザインツールを使用して求める形を自由自在にデザインしてもらえればと思います。
以下にはイメージがわきやすいようにそれぞれのShapeオブジェクトの簡単なサンプルと実行例を示しますので、参考としてご使用ください。
ソース1 Ellipseオブジェクトサンプル |
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" |
ソース2 Lineオブジェクトサンプル |
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" |
RadialGradientBrushオブジェクトについては後述します。
ソース3 Pathオブジェクトサンプル |
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" |
ソース4 Polygonオブジェクトサンプル |
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" |
ソース5 Polylineオブジェクトサンプル |
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" |
ソース6 Rectangleオブジェクトサンプル |
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" |
次のページでは、グラデーションができる「ブラシ」やベジェ曲線が使える「ジオメトリ」を解説します。より複雑なグラフィックスをお見せしましょう。
Copyright © ITmedia, Inc. All Rights Reserved.
HTML5�偽X 險倅コ九Λ繝ウ繧ュ繝ウ繧ー