パス マークアップ構文
更新 : 2007 年 11 月
パスについては、「WPF での図形と基本描画の概要」と「ジオメトリの概要」で説明していますが、このトピックでは、Extensible Application Markup Language (XAML) を使用してパス ジオメトリをよりコンパクトに指定するのに使用できる、強力かつ複雑なミニ言語について説明します。
このトピックは、次のセクションで構成されています。
必要条件
このトピックを理解するには、Geometry オブジェクトの基本的な機能に精通している必要があります。詳細については、「ジオメトリの概要」を参照してください。
StreamGeometry および PathFigureCollection のミニ言語
WPF には、ジオメトリック パスを記述するためのミニ言語を提供する 2 つのクラス、StreamGeometry と PathFigureCollection が用意されています。
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” です。コマンドの前後にスペースは不要です。
構文
Extensible Application Markup Language (XAML) 属性 StreamGeometry の構文は、省略可能な FillRule 値と 1 つ以上の図形の記述で構成されます。
XAML 属性 StreamGeometry の使用方法 |
|---|
<objectproperty="[fillRule] figureDescription[figureDescription]*" ... /> |
Extensible Application Markup Language (XAML) 属性 PathFigureCollection の構文は、1 つ以上の図形の記述で構成されます。
XAML の属性 PathFigureCollection の使用方法 |
|---|
<objectproperty="figureDescription[figureDescription]*" ... /> |
用語 |
説明 |
|---|---|
fillRule |
StreamGeometry で EvenOdd または Nonzero の各 FillRule のうち、どちらを使用するかを指定します。 このコマンドを省略した場合は、サブパスによって既定の動作 (EvenOdd) が使用されます。このコマンドを指定する場合は、最初に配置する必要があります。 |
figureDescription |
移動コマンド、描画コマンド、およびオプションの閉じるコマンドで構成される図形。 moveCommanddrawCommands [closeCommand] |
moveCommand |
図形の始点を指定する移動コマンド。「移動コマンド」を参照してください。 |
drawCommands |
図形のコンテンツを記述する 1 つ以上の描画コマンド。「描画コマンド」を参照してください。 |
closeCommand |
図形を閉じる、オプションの閉じるコマンド。「閉じるコマンド」を参照してください。 |
移動コマンド
新しい図形の始点を指定します。
構文 |
|---|
MstartPoint または mstartPoint |
用語 |
説明 |
|---|---|
startPoint |
新しい図形の始点。 |
大文字の M は、startPoint が絶対値であることを示し、小文字の m は、startPoint が前の点へのオフセットであるか、前の点が存在しない場合は (0,0) であることを示します。移動コマンドの後に複数の点を示すとき、線コマンドを指定した場合には、これらの点に向けて線が描画されます。
描画コマンド
描画コマンドは、複数の図形コマンドで構成できます。使用できる図形コマンドには、線、横線、縦線、3 次ベジエ曲線、2 次ベジエ曲線、平滑 3 次ベジエ曲線、平滑 2 次ベジエ曲線、楕円の円弧があります。
各コマンドは、大文字または小文字を使用して入力します。大文字は絶対値を示し、小文字は相対値を示します。そのセグメントの制御点は前の例の終点に対して相対的です。同じ種類の複数のコマンドを連続的に入力する場合は、重複したコマンドの入力を省略できます。たとえば、L 100,200 300,400 は L 100,200 L 300,400 と同じです。次の表は、move コマンドと draw コマンドについて説明しています。
線コマンド
現在の点と指定した終点の間に直線を作成します。l 20 30 と L 20,30 は、有効な line コマンドの例です。
構文 |
|---|
LendPoint または lendPoint |
用語 |
説明 |
|---|---|
endPoint |
線の終点。 |
横線コマンド
現在の点と指定した x 座標の間に横線を作成します。H 90 は、有効な横線コマンドの例です。
構文 |
|---|
H x または h x |
用語 |
説明 |
|---|---|
x |
線の終点の x 座標。 |
縦線コマンド
現在の点と指定した y 座標の間に縦線を作成します。v 90 は、有効な縦線コマンドの例です。
構文 |
|---|
V y または v y |
用語 |
説明 |
|---|---|
y |
線の終点の y 座標。 |
3 次ベジエ曲線コマンド
指定した 2 つの制御点 (controlPoint1 と controlPoint2) を使用して、現在の点と指定した終点の間の 3 次ベジエ曲線を作成します。C 100,200 200,400 300,200 は、有効な曲線コマンドの例です。
構文 |
|---|
C controlPoint1 controlPoint2 endPoint または c controlPoint1 controlPoint2 endPoint |
用語 |
説明 |
|---|---|
controlPoint1 |
曲線の開始接線を決定する、曲線の 1 つ目の制御点。 |
controlPoint2 |
曲線の終了接線を決定する、曲線の 2 つ目の制御点。 |
endPoint |
曲線が描画される点。 |
2 次ベジエ曲線コマンド
指定した制御点 (controlPoint) を使用して、現在の点と指定した終点の間の 2 次ベジエ曲線を作成します。q 100,200 300,200 は、有効な 2 次ベジエ曲線コマンドの例です。
構文 |
|---|
Q controlPoint endPoint または q controlPoint endPoint |
用語 |
説明 |
|---|---|
controlPoint |
曲線の開始接線と終了接線を決定する、曲線の制御点。 |
endPoint |
曲線が描画される点。 |
平滑 3 次ベジエ曲線コマンド
現在の点と指定した終点の間に 3 次ベジエ曲線を作成します。1 つ目の制御点は、現在の点を基準として前のコマンドの 2 つ目の制御点に点対称となります。前のコマンドが存在しない場合や、前のコマンドが 3 次ベジエ曲線コマンドまたは平滑 3 次ベジエ曲線コマンドでなかった場合、1 つ目の制御点は現在の点と同一のものと見なされます。2 つ目の制御点、つまり曲線の末尾の制御点は、controlPoint2 で指定します。たとえば、S 100,200 200,300 は、有効な平滑 3 次ベジエ曲線コマンドです。
構文 |
|---|
S controlPoint2 endPoint または s controlPoint2 endPoint |
用語 |
説明 |
|---|---|
controlPoint2 |
曲線の終了接線を決定する、曲線の制御点。 |
endPoint |
曲線が描画される点。 |
平滑 2 次ベジエ曲線コマンド
現在の点と指定した終点の間に 2 次ベジエ曲線を作成します。制御点は、現在の点を基準として前のコマンドの制御点に点対称となります。前のコマンドが存在しない場合や、前のコマンドが 2 次ベジエ曲線コマンドまたは平滑 2 次ベジエ曲線コマンドでなかった場合、制御点は現在の点と同一のものです。
構文 |
|---|
T controlPoint endPoint または t controlPoint endPoint |
用語 |
説明 |
|---|---|
controlPoint |
曲線の開始接線を決定する、曲線の制御点。 |
endPoint |
曲線が描画される点。 |
楕円の円弧コマンド
現在の点と指定した終点の間に楕円の円弧を作成します。
構文 |
|---|
A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint または a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint |
用語 |
説明 |
|---|---|
size |
円弧の x 半径と y 半径。 |
rotationAngle |
円弧の回転 (角度)。 |
isLargeArcFlag |
円弧の角度が 180 度を超える必要がある場合は 1 に設定します。それ以外の場合は 0 に設定します。 |
sweepDirectionFlag |
円弧を正の角の方向に描画する場合は 1 に設定します。それ以外の場合は 0 に設定します。 |
endPoint |
円弧が描画される点。 |
閉じるコマンド
現在の図形を終了し、現在の点と図形の開始点を結ぶ線を作成します。このコマンドは、図形の最後のセグメントと最初のセグメントの間に線結合 (角) を作成します。
構文 |
|---|
Z または z |
点の構文
点の x 座標および y 座標 を記述します。
構文 |
|---|
x,y または x y |
用語 |
説明 |
|---|---|
x |
点の x 座標。 |
y |
点の y 座標。 |
特殊な値
標準的な数値の代わりに、次の特殊な値を使用することもできます。これらの値では、大文字と小文字が区別されます。
Infinity
Double.PositiveInfinity を表します。-Infinity
Double.NegativeInfinity を表します。NaN
Double.NaN を表します。
指数表記を使用することもできます。たとえば、+1.e17 は有効な値です。