パス マークアップ構文

パスについては、「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 つ以上の図形の説明で構成されています。

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

移動コマンド

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

大文字 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 がその前の点に対するオフセットであることを示します。前の点が存在しない場合は (0,0) になります。

水平線コマンド

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

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

垂直線コマンド

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

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

3 次ベジエ曲線コマンド

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

2 次ベジエ曲線コマンド

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

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

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

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

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

楕円の円弧コマンド

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

閉じるコマンド

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

点の構文

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

特殊な値

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

Infinity
Double.PositiveInfinity を表します。

-Infinity
Double.NegativeInfinity を表します。

NaN
Double.NaN を表します。

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

関連項目

• Path
• StreamGeometry
• PathGeometry
• PathFigureCollection
• WPF での図形と基本描画の概要
• ジオメトリの概要
• 方法トピック