図形とパスの描画

  • [アーティクル]

Microsoft Expression Blend には、標準的なベクター描画機能が搭載されているため、ベクター グラフィックス プログラムと同じような図形やパス、マスクを描画できます。複雑な図やアートワークが必要な場合は、Microsoft Expression Design などの別のベクター グラフィックス プログラムの使用を検討してください。Expression Design の描画を Expression Blend で使用できるように XAML にエクスポートすることもできます。

詳細については、「Expression Design からエクスポートされた XAML のインポート」を参照してください。

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

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

  • コンテンツを正確に拡大縮小できる   レイアウトに柔軟性があるので、コンテンツにぴったり合ったサイズに仕上げられます。たとえば、テキストをボタンに追加する場合、ボタンをサイズ変更しても、グラフィックスは劣化しません。

  • 解像度に依存しない   ディスプレイの解像度は、これからも上がることが予想されます。アプリケーションの UI の表示サイズを調整できないと、解像度の大きなディスプレイでは、コンテンツが読めないほど小さくなる場合があります。このような API に拡大縮小や回転変換を適用した場合は、グラフィックスだけが変換されます。ウィンドウ内のコントロールのサイズと位置には影響しません。グラフィックスのサイズ変更はできても、ウィンドウのスペースを多数のコントロールに配分するのは簡単ではありません。Windows Presentation Foundation (WPF) では、各コントロールにウィンドウのスペースを割り当てるのではなく、すべてのコントロールを 1 つの描画として扱うので、UI 全体を簡単にサイズ変更したり回転したりできます。このように、WPF の UI は拡大縮小できるため、WPF アプリケーションは事実上、解像度に依存しません。ベクター グラフィックスは、ビットマップ イメージとは異なり、サイズが変わっても鮮明さが落ちることはありません。

Noteメモ :

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

Expression Blend で使用するベクター オブジェクトは、線や図形などの単純なものから、パスやコントロールなどの複雑なものまでさまざまです。オブジェクトを変更する方法は多数あります。オブジェクトのハンドルを使用すると、サイズ変更、移動、回転、反転、傾斜などを行えます。[プロパティ] パネルでは、オブジェクトのサイズや位置、回転の正確な値を入力できます。基本的に、元々ベクター形式でないもの (イメージや 3D テクスチャなど) を追加した場合を除き、アートボードに描くオブジェクトはすべてベクター形式です。次に、Expression Blend で使用するベクター オブジェクトの例を示します。

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

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

  • テキスト

  • 3D オブジェクト

  • コントロール

描画ツール

[ツール] パネルには、図形やパス要素の作成とオブジェクト操作用の一般的なベクター ツールがあります。

これらのツールの使用例については、次のトピックを参照してください。

ツール 名前 使用目的
Cc295296.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(ja-jp,Expression.40).png

四角形

四角形および正方形を描画します。角を丸めることもできます。
Cc295296.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,Expression.40).png

楕円

楕円および真円を描画します。
Cc295296.eb618397-5283-48be-8396-3449be7b6fbf(ja-jp,Expression.40).png

線

2 点を結ぶ直線を描画します。
Cc295296.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.40).png

ペン

各ノードを定義した場所でパスを描画および変更します。[ペン] ツールを使用すると、パス内のノードを追加、削除、変更することができます。
Cc295296.509dc167-734f-46c9-b012-987ee63450cd(ja-jp,Expression.40).png

鉛筆

フリーハンドでパスを描画します。
Cc295296.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).png

選択内容

アートボードで変更する図形、パス、およびオブジェクトを選択します。

[選択内容] ツールの使用方法については、「オブジェクトの選択または選択解除」を参照してください。
Cc295296.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.40).png

個別選択

パスのノードが描画された後で、個別に選択します。アートボードの親オブジェクト内に入れ子になった子オブジェクトを直接選択することもできます。

[個別選択] ツールの使用方法については、「オブジェクトの選択または選択解除」を参照してください。

図形とパス

楕円、四角形などの図形は、ベクター オブジェクトです。図形を描くには、[四角形] ツール Cc295296.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(ja-jp,Expression.40).png または [楕円] ツール Cc295296.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,Expression.40).png を使用します。

パスもベクター オブジェクトです。パスは、Expression Blend のベクター オブジェクトの中でも特に柔軟性の高いものです。パスは、線や曲線が連結されて、一続きになったものです。アートボードにパスを描画した後で、パスを変形や結合などの方法で変更して、ベクター図形を作成することができます。ポリライン (複数の線分が連結して構成された閉じられていないパス) に加えて、多角形 (複数の線分が連結して構成された閉じられたパス) も描画できます。パスを描くには、[ペン] ツール Cc295296.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.40).png、[鉛筆] ツール Cc295296.509dc167-734f-46c9-b012-987ee63450cd(ja-jp,Expression.40).png、[線] ツール Cc295296.eb618397-5283-48be-8396-3449be7b6fbf(ja-jp,Expression.40).png を使用します。描いたパスを変更するには、まず、[選択内容] ツール Cc295296.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).png か [個別選択] ツール Cc295296.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.40).png で、そのパスを選択します。

パスを変更する方法については、次のトピックを参照してください。

図形からパスへの変換

図形オブジェクトは、[パスに変換] コマンド ([オブジェクト] メニューで [パス]、[パスに変換] の順にクリックします) を使用してパス オブジェクト変換しない限り、パス オブジェクトと同じように編集することはできません。

例については、「図形のパスへの変換」を参照してください。

Noteメモ :

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

角の半径の変更

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

Cc295296.b120ec92-5a55-4f25-89a4-da4f63572e47(ja-jp,Expression.40).png

X 方向と Y 方向の半径を別々に変更するには、Shift キーを押しながら半径ハンドルのどちらかをドラッグします。

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

パスの結合

次に、パス (または図形) を結合した結果を示します。

Cc295296.2df17a5d-a338-4ef4-96c5-dae51cc1ca8a(ja-jp,Expression.40).png

Cc295296.25182a96-9a69-478a-9cfe-5b360e6a9bea(ja-jp,Expression.40).png

結合前の 2 つの図形

Cc295296.eb6fad93-f17e-4f62-a926-8c8651862891(ja-jp,Expression.40).png

交差

Cc295296.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ja-jp,Expression.40).png

合算

Cc295296.a5d608f2-bba2-48c5-8b15-2c115db86acc(ja-jp,Expression.40).png

重複部分を除外

Cc295296.f0c1ff71-7814-42ba-806b-7ea92d616e69(ja-jp,Expression.40).png

除算

Cc295296.15de085f-48f5-41dd-a286-e3dcb4cfd18b(ja-jp,Expression.40).png

減算

2 つ以上のオブジェクト (パスまたは図形) を結合して、1 つのパス オブジェクトを作成することができます。結合する前に最後に選択したオブジェクトが、作成されたパス オブジェクトで置き換えられ、そのオブジェクトのプロパティが適用されます。多くの場合、結合結果は複合パスになります。

例については、「シェイプまたはパスの結合」を参照してください。

パスを変更する方法の詳細については、「個別選択ツールの修飾キー」および「ペン ツールの修飾キー」を参照してください。

Noteメモ :

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

複合パス

複合パスを作成するときは、パスの交差している部分が減算されます。複合後のパスのビジュアル プロパティは、最背面にあったパスと同じになります。

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

Cc295296.2157a8aa-d9a7-4de4-8de5-b10d28f08a84(ja-jp,Expression.40).png

複合パスに図形を含める前に、図形をパスに変換しておく必要があります ([オブジェクト] メニューの [パス] をポイントし、[パスに変換] をクリックします)。2 つ以上のパスを 1 つのパスに複合します。複合する前に選択したパスのうち、最背面 (Z 軸方向の重なり順) のパスが複合パスで置き換えられ、そのプロパティが複合後のパスに適用されます。必要に応じて、作成した複合パスを分離することができます。ただし、元のプロパティは復元されません。

例については、「複合パスの作成または解除」を参照してください。

クリッピング パス

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

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

Cc295296.22471e98-a841-4f39-a3ef-36090cf5a625(ja-jp,Expression.40).png

アートボードでクリッピング パスを作成した後で変更したり、元のパス オブジェクトを失わずにクリッピング パスを解除したりできます。例については、「クリッピング パスの適用、変更、または削除」を参照してください。

クリッピング パスの個々の頂点をアニメーション (マスクされたオブジェクトが徐々に見えてくるアニメーションなど) にすることもできます。例については、「パスまたはクリッピング パス上の点のアニメーション化」を参照してください。

不透明度マスク

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

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

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

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

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

Cc295296.2bcb0f7e-9e47-4314-8f64-23fdc711510f(ja-jp,Expression.40).png

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.