図形とパスの描画Draw shapes and paths

XAML デザイナーでは、"図形" とはその名の示すとおりのものです。In XAML Designer, a shape is exactly what you'd expect. たとえば、四角形、円、楕円などです。For example: a rectangle, circle, or ellipse. パス は、より柔軟なバージョンの図形です。A path is a more flexible version of a shape. 図形の形状を変更したり、図形を結合して新しい図形を形成するといった操作ができます。You can do things like reshape them or combine them together to form new shapes.

図形とパスではベクター グラフィックスを使用するため、高解像度表示に対応して拡大縮小できます。Shapes and paths use vector graphics so they scale well to high resolution displays. ベクター グラフィックスの詳細については、 ベクター グラフィックスに関するビデオベクター グラフィックスに関するページを参照してください。If you want to learn more about vector graphics, see What are Vector Graphics or vector graphics.

このトピックの内容In this topic:

図形の描画Draw a shape

図形は [アセット] パネルにあります。You can find shapes in the Assets panel.

[アセット] パネルの [図形] カテゴリShapes category on the Assets panel

目的の図形をアートボードにドラッグします。Drag any shape that you want to the artboard. 次に、図形にあるハンドルを使用して、図形の拡大縮小、回転、移動、または傾斜を行います。Then, you can use handles on the shape to scale, rotate, move, or skew the shape.

パスの描画Draw a path

パスは、直線と曲線が連結して一続きになったものです。A path is a series of connected lines and curves. パスを使用すると、 [アセット] パネルでは使用できない面白い図形を作成できます。Use a path to create interesting shapes that are not available in the Assets panel.

パスの描画には直線、ペン、または鉛筆を使用します。You can draw a path by using a line, pen or pencil. これらのツールは [ツール] パネルにあります。You can find these tools in the Tools panel.

直線の描画Draw a straight line

[ペン] ツール または [直線] ツール を使います。Use the Pen tool , or the Line tool .

ペン ツールの使用 Using the Pen tool

アートボード上で 1 回クリックし、始点を定義します。次に、再度クリックして直線の終わりを定義します。On the artboard, click once to define the start point, and then click again to define the end of the line.

直線ツールの使用 Using the Line tool

アートボード上で、直線の始点からドラッグして、終点でマウス ボタンを放します。On the artboard, drag from where you want the line to start, and then release at the point where you want the line to end.

曲線の描画Draw a curve

[ペン] ツール を使います。Use the Pen tool .

アートボード上で 1 回クリックして、直線の始点を定義してから、ポインターをクリックし、ドラッグして目的の曲線を作成します。On the artboard, click once to define the start point of a line, and then click and drag your pointer to create the desired curve.

パスを閉じる場合は、線上の最初の点をクリックします。If you want to close the path, click the first point on the line.

曲線のシェイプの変更Change the shape of a curve

[個別選択] ツール を使います。Use the Direct selection tool .

図形をクリックしてから、図形の任意のポイントをドラッグして曲線の形状を変更します。Click the shape, and then drag any point on the shape to change curve shapes.

フリーハンドのパスの描画Draw a free-form path

[鉛筆] ツール を使います。Use the Pencil tool .

アートボード上で、実際の鉛筆のように自由にパスを描画できます。On the artboard, draw a free-form path just as you would by using a real pencil.

パスの一部の削除Remove part of a path

[個別選択] ツール を使います。Use the Direct selection tool .

削除する部分を含むパスを選択して、 [削除] ボタンをクリックします。Select the path that contains the segment you want to delete, and then click the Delete button.

パス内のポイントの削除Remove a point in a path

[選択] ツール [ペン] ツール を使います。Use the Selection tool , and the Pen tool .

[選択] ツール を使ってパスを選びます。Use the Selection tool to select the path. 次に、[ペン] ツール を使って、削除するポイントをクリックします。Then, use the Pen tool to click the point that you want to remove.

パスへのポイントの追加Add a point to a path

[選択] ツール [ペン] ツール を使います。Use the Selection tool , and the Pen tool .

[選択] ツール を使ってパスを選びます。Use the Selection tool to select the path. [ペン] ツール を使って、ポイントを追加するパス上の任意の場所をクリックします。Use the Pen tool to click anywhere on the path where you want to add the point.

図形のパスへの変換Convert a shape to a path

パスを変更するのと同じ方法で図形を変更するには、図形をパスに変換します。To modify a shape in the same ways that you modify a path, convert the shape to a path.

短いビデオを見る: インストール済みフィーチャーの構成 パスの作業: 図形をパスに変換するWatch a short video: Configure Installed Features Working with paths: Convert a shape to a path.

パスの結合Combine paths

パスと図形を結合して 1 つのパスにすることができます。You can combine paths and shapes into a single path.

結合前の 2 つの図形Two shapes before combining 交差Intersect
合算Unite 重複部分を除外Exclude Overlap
除算Divide 減算Subtract

短いビデオを見る: インストール済みフィーチャーの構成 パスの作業: パスを結合するWatch a short video: Configure Installed Features Working with paths: Combine paths.

複合パスの作成Create a compound path

複合パスを作成するときは、パスの交差している部分が減算されます。複合後のパスのビジュアル プロパティは、最背面にあったパスと同じになります。When you create a compound path, any intersecting parts of the paths are subtracted from the result, and the resulting path takes on the visual properties of the bottommost path.

複合パスは、作成後はいつでも分離できます。You can break apart a compound path any time after you create it.

短いビデオを見る: インストール済みフィーチャーの構成 パスの作業: 複合パスを作成するWatch a short video: Configure Installed Features Working with paths: Create a compound path.

クリッピング パスの作成Create a clipping path

クリッピング パスは、別のオブジェクトに適用するパスまたは図形です。クリッピング パスの外側のオブジェクトがマスクされて非表示になります。A clipping path is a path or shape that is applied to another object, hiding the parts of the masked object that fall outside the clipping path.

短いビデオを見る: インストール済みフィーチャーの構成 パスの作業: クリッピング パスを作成するWatch a short video: Configure Installed Features Working with paths: Create a clipping path.

関連項目See also