描画の概要

Microsoft Expression Blend には標準的なベクタ描画機能があり、ベクタ グラフィックス プログラムで描画するようなシェイプ、パス、マスクを描画することができます。さらに高度な描画およびアートワークについては、Microsoft Expression Design 2 など、別のベクタ グラフィックス プログラムの使用を検討してください。Expression Design 2 では、Expression Blend で使用するために描画を XAML としてエクスポートすることもできます。

ベクタ グラフィックスとは

ベクタ グラフィックスはビットマップのようにピクセルを使用するのではなく、点、直線、曲線、および面によって幾何学的に定義されます。コンピュータ モニタに高解像度ディスプレイが採用されるにつれて、高解像度表示ではピクセルが見えてしまうビットマップの使用を避ける必要性が生じています。ビットマップ画像のサイズ変更は不便であり、変更するとほとんどの場合に画質が劣化します。ベクタ グラフィックスでは高解像度で表示しても滑らかさが維持され、サイズを拡大しても輪郭の鮮明さが維持されます。このため、たとえばユーザー インターフェイス (UI) に表示されるさまざまなサイズのアイコン ファイルなど、サイズが異なるイメージを複数作成する必要がないことから、ベクタ グラフィックスを使用するとコンテンツ関連のカスタマイズが簡単になります。その他にも、ベクタ グラフィックスには次のような利点があります。

• コンテンツの正確な拡大縮小   ベクタ グラフィックスは柔軟性のあるレイアウトに組み込まれ、コンテンツに基づいて的確にサイズ変更できます。たとえば、テキストをボタンに追加する場合、ボタンをサイズ変更しても、グラフィックスは劣化しません。

• 解像度への非依存 ディスプレイの解像度はこれまでと同様に、今後も向上を続けると考えられます。アプリケーションの UI を拡大縮小できなければ UI は解像度の向上に伴って小さくなり、そのためコンテンツ表示が読み取れないほど小さくなって、使用できなくなります。このような API に拡大縮小や回転変換を適用した場合は、グラフィックスだけが変換されます。ウィンドウ内のコントロールのサイズと位置には効果がありません。グラフィックスを拡大縮小することはできますが、コントロールごとに分割されるウィンドウ スペースの拡大縮小は簡単ではありません。Windows Presentation Foundation (WPF) は、各コントロールをそれぞれの領域に区分けするのではなく、ウィンドウ内のすべてのコントロールを単一の描画として構成するので、UI 全体に拡大縮小や回転変換を簡単に適用できます。このように、WPF の UI は拡大縮小できるため、WPF アプリケーションは事実上、解像度に依存しません。ビットマップ イメージの輪郭は拡大縮小時にぼやけてしまいますが、ベクタ グラフィックスでは明瞭さが維持されます。

メモ :
WPF アプリケーション (Expression Blend を使用して作成されたアプリケーションなど) のサイズ関連プロパティの設定では、ピクセルとは、デバイスに依存しないピクセル、または、デバイスに依存しない単位であり、画像解像度を 96 dpi に設定したモニタでの 1 ピクセルのサイズに相当します。1 単位は、モニタのサイズまたは画面解像度に関係なく約 1/96 インチです。

Expression Blend のベクタ オブジェクトは、線やシェイプのように簡単なものもあれば、パスやコントロールのように複雑なものもあります。オブジェクトはさまざまな方法で変更できます。オブジェクト上のハンドルを使用すると、サイズ変更、移動、回転、反転、傾斜などを操作できます。また、[プロパティ] パネルを使用して、オブジェクトのサイズ、位置、回転の正確な値を入力できます。基本的に、アートボードに描画するオブジェクトはすべてベクタ形式です。ただし、イメージ、3D テクスチャなど、プロジェクトに追加済みのアイテムで、もともとベクタ形式でないものは除きます。Expression Blend に含まれるベクタ オブジェクトの例は次のとおりです。

• 楕円、四角形などの描画オブジェクト

• 線、曲線などのパス オブジェクト

• テキスト

• 3D オブジェクト

• コントロール

先頭に戻る

描画ツール

[ツールボックス] には、シェイプとパス要素の作成およびオブジェクトの操作用に、一般的なベクタ ツールが用意されています。これらのツールの使用例については、「シェイプの描画」、「直線の描画」、「曲線の描画,」、「自由形式のパスの描画」、「曲線のシェイプの変更」、および「パス上のポイントに対するコントロール ハンドルの再定義」を参照してください。

ツール		使用目的
	四角形	四角形および正方形を描画します。角を丸めることもできます。
	楕円	楕円および真円を描画します。
	線	2 点を結ぶ直線を描画します。
	ペン	各ノードを定義した場所でパスを描画および変更します。[ペン] ツールを使用すると、パス内のノードを追加、削除、変更することができます。
	鉛筆	フリーハンドでパスを描画します。
	選択内容	アートボード上で変更対象のシェイプ、パス、およびオブジェクトを選択します。[選択内容] ツールの使用方法の詳細については、「オブジェクトの選択または選択解除」を参照してください。
	個別選択	パスのノードが描画された後で、個別に選択します。[個別選択] ツールを使用すると、レイアウト パネルなど、アートボード上の親オブジェクト内に配置された子オブジェクトを直接選択することができます。[個別選択] ツールの使用方法の詳細については、「オブジェクトの選択または選択解除」を参照してください。

先頭に戻る

シェイプかパスか

四角形または楕円などのシェイプはベクタ オブジェクトです。[四角形] または [楕円] ツールを使用して、シェイプを描画することができます。

パスもベクタ オブジェクトであり、Expression Blend で最も柔軟性の高いベクタ オブジェクトであると言えます。パスは、線や曲線が連結されて、一続きになったものです。アートボードにパスを描画した後で、パスを変形、結合、変更して、ベクタ シェイプを作成することができます。ポリライン (複数の線分が連結して構成された閉じられていないパス) に加えて、多角形 (複数の線分が連結して構成された閉じられたパス) も描画できます。パスは、[ペン] ツール、[鉛筆] ツール、および [線] ツールを使用して描画できます。その後、[選択内容] または [個別選択] を使用して、パスを変更できます。パスを変更する方法の詳細については、「パスの一部の削除」、「パス上の点の追加または削除」、「曲線のシェイプの変更」、「パス上のポイントに対するコントロール ハンドルの再定義」、および「ペンと個別選択の使用方法 [Blend]」を参照してください。

先頭に戻る

シェイプからパスへの変換

シェイプは、[パスに変換] コマンド ([オブジェクト] メニューで [パス]、[パスに変換] の順にクリック) を使用してシェイプ要素をパス要素に変換しない限り、パス要素と同じように編集することはできません。例については、「シェイプのパスへの変換」を参照してください。

メモ :
シェイプからパスに変換した後は、四角形の角の半径など、シェイプ固有のプロパティを編集できなくなります。また、変換前のシェイプにスタイルが適用されている場合、変換後のパスのプロパティはパスの既定値 (塗りつぶしブラシなし、黒色のストローク) にリセットされます。

先頭に戻る

角の半径の変更

四角形を選択し、左上隅にある角の半径ハンドルをドラッグすると、四角形の角の半径を変更することができます。角の半径ハンドルは、四角形の左上隅から突き出ている点線の一方の端にマウス ポインタを重ねると表示されます。

Shift キーを押しながら一方の角の半径のハンドルをドラッグすると、X と Y の角の半径を個別に変更することができます。

例については、「四角形の角の丸め」を参照してください。

先頭に戻る

パスの結合

パス (またはシェイプ) の組み合わせによって、次のような結果が得られます。

	結合前の 2 つのシェイプ		交差
	合算		重複部分を除外
	除算		減算

2 つ以上のオブジェクト (パスまたはシェイプ) を結合して、1 つのパス オブジェクトを作成することができます。結合前に最後に選択したオブジェクトが作成されたパス オブジェクトに置き換えられ、そのオブジェクトのプロパティが適用されます。多くの場合、結果はcompound pathになります。例については、「シェイプまたはパスの結合」を参照してください。パスを変更する方法の詳細については、「ペンと個別選択の使用方法 [Blend]」を参照してください。

メモ :
結合後は、シェイプ固有のプロパティ (四角形の角の半径など) を変更できません。また、結合前に最後に選択したオブジェクトにスタイルが適用されている場合、結合後のパスのプロパティはパスの既定値 (塗りつぶしブラシなし、黒色のストローク) にリセットされます。

先頭に戻る

複合パス

複合パスを作成する場合、パスの共通部分があれば結果から減算され、作成されたパスには、最下層のパスのビジュアル プロパティが採用されます。

複合パスに変換された 2 つのパス

複合パスにシェイプを含める前に、シェイプをパスに変換しておく必要があります ([オブジェクト] メニューの [パス] をポイントし、[パスに変換] をクリックします)。2 つ以上のパスから 1 つの複合パスを作成できます。複合前に選択した最背面 (Z オーダーによる重ね順) のパスが、作成されたパスで置き換えられます。このとき、その最背面のパスのプロパティが適用されます。必要に応じて、作成した複合パスを分離することができます。ただし、元のプロパティは復元されません。例については、「複合パスの作成または解除」を参照してください。

先頭に戻る

クリッピング パス

クリッピング パスは、別のオブジェクトに適用されるパスまたはシェイプであり、クリッピング パスの外側部分のオブジェクトはマスクされて非表示になります。

クリッピング パスが適用された Image オブジェクト

Expression Blend 2 では、クリッピング パスを作成した後にアートボード上で変更し、元のパス オブジェクトを失わずにクリッピング パスを解放できるようになりました。例については、「クリッピング パスの適用、変更、または削除」を参照してください。クリッピング パスの個々の頂点をアニメーション化することもできます。たとえば、マスクされたオブジェクトを徐々に公開できます。例については、「パスまたはクリッピング パス上の点のアニメーション化」を参照してください。

先頭に戻る

不透明度マスク

不透明度マスクは、別のオブジェクトに適用するパスまたはシェイプにできます。パスの透明部分は、マスクされたオブジェクトがフェード アウトする領域を示すのに対して、マスクの不透明部分は、マスクされたオブジェクトが透けて見える場所を示します。[プロパティ] パネルの [外観] セクションを使用すると、どのようなオブジェクトにも不透明度マスクを定義できます。

不透明度マスクを単純なグラデーション ブラシにして、透明度に基づいてオブジェクトを部分的に表示または非表示にすることができます。次の例の左のイメージには、不透明度マスクが適用されていません。右のイメージは、次の 2 つの方法のいずれかによって作成することができます。

• Image オブジェクトの OpacityMask プロパティを放射状グラデーション ブラシに設定し、右のグラデーション境界のアルファ値を 0 に設定します。

• Image オブジェクトの前面に Rectangle オブジェクトを作成し、この Rectangle の OpacityMask プロパティを放射状グラデーション ブラシに設定して、左のグラデーション境界のアルファ値を 0 に設定します。

マスクを適用していないイメージ (左) と不透明度マスクを適用したイメージ (右)

例については、「不透明度マスクの作成」を参照してください。

先頭に戻る