次の方法で共有

パス マークアップ構文

  • [アーティクル]

パスについては、「WPF での図形と基本描画の概要」と「ジオメトリの概要」で説明されていますが、このトピックでは、Extensible Application Markup Language (XAML) を使用してパス ジオメトリをよりコンパクトに指定するために使用できる強力で複雑なミニ言語について詳しく説明します。

必須コンポーネント

このトピックを理解するには、Geometry オブジェクトの機能についてよく理解している必要があります。 詳細については、「ジオメトリの概要」をご覧ください。

StreamGeometry ミニ言語と PathFigureCollection ミニ言語

WPF には、ジオメトリック パスを記述するためのミニ言語を提供する StreamGeometry と PathFigureCollection の 2 つのクラスが用意されています。

  • StreamGeometry ミニ言語は、UIElement の Clip プロパティや Path 要素の Data プロパティなど、Geometry 型のプロパティを設定するときに使用します。 次の例では、属性構文を使用して StreamGeometry を作成します。

    <Path Stroke="Black" Fill="Gray"
      Data="M 10,100 C 10,300 300,-200 300,100" />

  • PathFigureCollection ミニ言語は、PathGeometry の Figures プロパティを設定するときに使用します。 次の例では、属性構文を使用して PathGeometry の PathFigureCollection を作成します。

    <Path Stroke="Black" Fill="Gray">
  <Path.Data>
    <PathGeometry Figures="M 10,100 C 10,300 300,-200 300,100" />
  </Path.Data>
</Path>

前の例からわかるように、2 つのミニ言語はほとんど同じです。 StreamGeometry を使用できる状況であれば常に PathGeometry を使用できますが、どちらを使用すればよいでしょうか。 作成後にパスを変更する必要がない場合は StreamGeometry を使用し、パスを変更する必要がある場合は PathGeometry を使用します。

PathGeometry と StreamGeometry オブジェクトの相違点の詳細については、「ジオメトリの概要」をご覧ください。

空白についてのメモ

簡潔にするために、この後のセクションで示す構文には 1 つの空白が使用されていますが、1 つの空白を使用できるところでは、常に複数の空白スペースも許容されます。

2 つの数値は、実際にはコンマまたは空白で区切る必要はありません。ただし、これが可能なのは、結果の文字列があいまいにならない場合のみです。 たとえば、2..3 は実際には "2." と ".3" の 2 つの数値です。 同様に、2-3 は "2" と "-3" です。 どちらの場合も、コマンドの前後に空白は必要ありません。

構文

StreamGeometry の Extensible Application Markup Language (XAML) 属性使用構文は、省略可能な FillRule 値と 1 つ以上の図形の説明で構成されています。

StreamGeometry XAML 属性使用構文
< object property ="[ fillRule] figureDescription[ figureDescription]* " ... />

PathFigureCollection の Extensible Application Markup Language (XAML) 属性使用構文は、1 つ以上の図形の説明で構成されています。

PathFigureCollection XAML 属性使用構文
< object property =" figureDescription[ figureDescription]* " ... />
Term 説明
fillRule System.Windows.Media.FillRule

StreamGeometry が EvenOdd と NonzeroFillRule のどちらを使用するかを指定します。

- F0 は、EvenOdd の塗りつぶし規則を指定します。
- F1 は、Nonzero の塗りつぶし規則を指定します。

このコマンドを省略した場合、サブパスは既定の動作 (EvenOdd) を使用します。 このコマンドを指定する場合は、先頭に配置する必要があります。
figureDescription 移動コマンドと描画コマンド (および省略可能な閉じるコマンド) で構成される図形。

moveCommand drawCommands [ closeCommand ]
moveCommand 図形の開始位置を指定する移動コマンド。 「Move コマンド」セクションをご覧ください。
drawCommands 図の内容を記述する 1 つまたは複数の描画コマンド。 「描画コマンド」セクションをご覧ください。
closeCommand 図形を閉じるコマンド (省略可能)。 「閉じるコマンド」セクションをご覧ください。

移動コマンド

新しい図形の始点を指定します。

構文
M startPoint

または

m startPoint
Term 説明
startPoint System.Windows.Point

新しい図形の始点。

大文字 M は startPoint が絶対値であることを示します。小文字 m は startPoint がその前の点に対するオフセットであることを示します。前の点が存在しない場合は (0,0) になります。 移動コマンドの後ろに複数の点を指定した場合は、直線コマンドを指定した場合でも、これらの点を結ぶ線が描画されます。

描画コマンド

描画コマンドは、さまざまな図形コマンドで構成できます。 次の図形のコマンドを使用できます。直線、水平線、垂直線、3 次ベジエ曲線、2 次ベジエ曲線、スムーズ 3 次ベジエ曲線、スムーズ 2 次ベジエ曲線、および楕円の円弧。

各コマンドは、大文字または小文字で入力します。大文字は絶対値を、小文字は相対値を表し、そのセグメントの制御点は、前の例の終点を基準とします。

ヒント

同じ種類の複数のコマンドを続けて入力する場合は、重複するコマンドの入力を省略できます。たとえば、L 100,200 300,400 は L 100,200 L 300,400 と同等です。

直線コマンド

現在の点と指定された終点の間に直線を作成します。 l 20 30 と L 20,30 は、有効な直線コマンドの例です。

構文
L endPoint

または

l endPoint
Term 説明
endPoint System.Windows.Point

線の終点。

大文字 L は endPoint が絶対値であることを示します。小文字 l は endPoint がその前の点に対するオフセットであることを示します。前の点が存在しない場合は (0,0) になります。

水平線コマンド

現在の点と指定された x 座標の間に水平線を作成します。 H 90 は、有効な水平線コマンドの例です。

構文
H x

または

h x
Term 説明
x System.Double

直線の終点の x 座標。

大文字 H は x が絶対値であることを示します。小文字 h は x がその前の点に対するオフセットであることを示します。前の点が存在しない場合は (0,0) になります。

垂直線コマンド

現在の点と指定された y 座標の間に垂直線を作成します。 v 90 は、有効な垂直線コマンドの例です。

構文
V y

または

v y
Term 説明
y System.Double

直線の終点の y 座標。

大文字 V は y が絶対値であることを示します。小文字 v は y がその前の点に対するオフセットであることを示します。前の点が存在しない場合は (0,0) になります。

3 次ベジエ曲線コマンド

指定された 2 つの制御点 (controlPoint1 と controlPoint2) を使用して、現在の点と指定された終点の間に 3 次ベジエ曲線を作成します。 C 100,200 200,400 300,200 は、有効な曲線コマンドの例です。

構文
C controlPoint1controlPoint2endPoint

または

c controlPoint1controlPoint2endPoint
Term 説明
controlPoint1 System.Windows.Point

曲線の 1 つ目の制御点。曲線の前半の接線を決定します。
controlPoint2 System.Windows.Point

曲線の 2 つ目の制御点。曲線の後半の接線を決定します。
endPoint System.Windows.Point

曲線が描画される点。

2 次ベジエ曲線コマンド

指定された制御点 (controlPoint) を使用して、現在の点と指定された終点の間に 2 次ベジエ曲線を作成します。 q 100,200 300,200 は、有効な 2 次ベジエ曲線コマンドの例です。

構文
Q controlPoint endPoint

または

q controlPoint endPoint
期間 説明
controlPoint System.Windows.Point

曲線の制御点。曲線の前半と後半の接線を決定します。
endPoint System.Windows.Point

曲線が描画される点。

スムーズ 3 次ベジエ曲線コマンド

現在の点と指定された終点の間に 3 次ベジエ曲線を作成します。 1 つ目の制御点は、現在の点に対する前のコマンドの 2 つ目の制御点のリフレクションと見なされます。 前のコマンドが存在しない場合、または前のコマンドが 3 次ベジエ曲線コマンドまたはスムーズ 3 次ベジエ曲線コマンドでなかった場合、1 つ目の制御点は、現在の点と一致するとみなされます。 2 つ目の制御点 (曲線の後半の制御点) は、controlPoint2 で指定されます。 たとえば、S 100,200 200,300 は有効なスムーズ 3 次ベジエ曲線コマンドです。

構文
S controlPoint2endPoint

または

s controlPoint2endPoint
Term 説明
controlPoint2 System.Windows.Point

曲線の制御点。曲線の後半の接線を決定します。
endPoint System.Windows.Point

曲線が描画される点。

スムーズ 2 次ベジエ曲線コマンド

現在の点と指定された終点の間に 2 次ベジエ曲線を作成します。 制御点は、現在の点に対する前のコマンドの制御点のリフレクションと見なされます。 前のコマンドが存在しない場合、または前のコマンドが 2 次ベジエ曲線コマンドまたはスムーズ 2 次ベジエ曲線コマンドでなかった場合、制御点は、現在の点と一致するとみなされます。

構文
T endPoint

または

t endPoint
期間 説明
endPoint System.Windows.Point

曲線が描画される点。

楕円の円弧コマンド

現在の点と指定された終点の間に楕円の円弧を作成します。

構文
A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint

または

a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint
期間 説明
size System.Windows.Size

円弧の x 半径と y 半径。
rotationAngle System.Double

楕円の回転 (度単位)。
isLargeArcFlag 円弧の角度を 180 度以上にする場合は 1 に設定します。それ以外の場合は 0 に設定します。
sweepDirectionFlag 円弧が正の角度の方向に描画される場合は 1 に設定します。それ以外の場合は 0 に設定します。
endPoint System.Windows.Point

円弧が描画される点。

閉じるコマンド

現在の図形を終了し、現在の点と図の開始点を結ぶ線を作成します。 このコマンドは、図形の最初のセグメントと最後のセグメントの間に線結合 (コーナー) を作成します。

構文
Z

または

z

点の構文

(0, 0) が左上隅になる点の x 座標と y 座標を記述します。

構文
x , y

または

x y
期間 説明
x System.Double

点の x 座標。
y System.Double

点の y 座標。

特殊な値

標準的な数値ではなく、次の特殊な値を使用することもできます。 これらの値では、大文字と小文字が区別されます。

Infinity
Double.PositiveInfinity を表します。

-Infinity
Double.NegativeInfinity を表します。

NaN
Double.NaN を表します。

指数表記を使用することもできます。 たとえば、+1.e17 は有効な値です。

関連項目