移動と描画のコマンド構文
パス ジオメトリを XAML 属性値として指定するために使用できる移動および描画コマンド (ミニ言語) について説明します。 移動および描画コマンドは、ベクター グラフィックまたは図形をシリアル化およびインターチェンジ形式として出力できる多くの設計およびグラフィックス ツールで使用されます。
移動および描画コマンド文字列を使用するプロパティ
移動および描画コマンドの構文は、コマンドを解析して実行時のグラフィックス表現を生成する XAML の内部型コンバーターでサポートされています。 この表現は、基本的にプレゼンテーションの準備ができているベクターの完成したセットです。 ベクター自体は、プレゼンテーションの詳細を完了しません。要素に他の値を設定する必要があります。 Path オブジェクトの場合は、Fill、Stroke、およびその他のプロパティの値も必要です。その後、Pathは何らかの方法でビジュアル ツリーに接続する必要があります。 PathIcon オブジェクトの場合は、Foreground プロパティを設定します。
Windows ランタイムには、移動コマンドと描画コマンドを表す文字列を使用できる 2 つのプロパティがあります。Path.Data と PathIcon.Data。 移動コマンドと描画コマンドを指定してこれらのプロパティのいずれかを設定する場合は、通常、その要素の他の必要な属性と共に XAML 属性値として設定します。 詳細を確認せずに、次のようになります。
<Path x:Name="Arrow" Fill="White" Height="11" Width="9.67"
Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06" />
移動コマンドと描画コマンドの使用と PathGeometry の使用
XAML Windows ランタイムの場合、移動コマンドと描画コマンドは、Figures プロパティ値を持つ 1 つのPathFigure オブジェクトを持つPathGeometryを生成します。 各描画コマンドは、その単一のPathFigureの Segments コレクションにPathSegment派生クラスを生成し、移動コマンドによって StartPoint が変更され、閉じるコマンド セットIsClosedがtrueに変更されます。 実行時に Data 値を調べると、この構造体をオブジェクト モデルとして移動できます。
基本的な構文
移動コマンドと描画コマンドの構文は、次のように要約できます。
- オプションの塗りつぶしルールから始めます。 通常、これは、 EvenOdd の既定値が必要ない場合にのみ指定します。 ( についてEvenOdd 後で)。
- 移動コマンドを 1 つだけ指定します。
- 1 つ以上の描画コマンドを指定します。
- 閉じるコマンドを指定します。 close コマンドは省略できますが、その場合、図は開いたままになります (一般的ではありません)。
この構文の一般的な規則は次のとおりです。
- 各コマンドは、正確に 1 文字で表されます。
- その文字には大文字または小文字を使用できます。 ここでは説明するように、ケースが重要です。
- 通常、close コマンドを除く各コマンドの後に 1 つ以上の数値が続きます。
- コマンドに複数の数値を指定する場合は、コンマまたはスペースで区切ります。
[fillRule] moveCommand drawCommand [drawCommand*] [closeCommand]
描画コマンドの多くはポイントを使用し、 x,y 値を指定します。 *points というプレースホルダーで示されている部分には、点の x,y 値として 2 つの 10 進数値を指定できます。
結果があいまいでない場合は、多くの場合、空白を省略できます。 実際、すべての数値セット (ポイントとサイズ) の区切り記号としてコンマを使用する場合は、すべての空白を省略できます。 たとえば、この使用は有効です: F1M0,58L2,56L6,60L13,51L15,53L6,64z。 ただし、わかりやすくするためにコマンド間に空白を含める方が一般的です。
小数点の小数点としてコンマを使用しないでください。コマンド文字列は XAML によって解釈され、 en-us ロケールで使用されているものとは異なるカルチャ固有の数値書式規則を考慮していません。
構文の詳細
塗りつぶしルール
オプションの塗りつぶしルールには、 F0 または F1 の 2 つの値を指定できます。 ( F は常に大文字です。) F0 が既定値です。 EvenOdd フィル動作が生成されるため、通常は指定しません。 F1 を使用して、Nonzero フィル動作を取得します。 これらの塗りつぶしの値は、 FillRule 列挙体の値と一致します。
移動コマンド
新しい図形の始点を指定します。
| 構文 |
|---|
M startPoint または m startPoint |
| Term | 説明 |
|---|---|
| startPoint | 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 は有効な直線コマンドの例です。 LineGeometry オブジェクトと同等のオブジェクトを定義します。
| 構文 |
|---|
L endPoint または l endPoint |
| Term | 説明 |
|---|---|
| endPoint | Point 線の終点。 |
水平線コマンド
現在の点と指定された x 座標の間に水平線を作成します。 H 90 は、有効な水平線コマンドの例です。
| 構文 |
|---|
H x -又は- h x |
| Term | 説明 |
|---|---|
| x | Double 直線の終点の x 座標。 |
垂直線コマンド
現在の点と指定された y 座標の間に垂直線を作成します。 v 90 は、有効な垂直線コマンドの例です。
| 構文 |
|---|
V y -又は- v y |
| Term | 説明 |
|---|---|
| y | Double 直線の終点の y 座標。 |
[3 次ベジエ曲線] コマンド
指定した 2 つのコントロール ポイント (controlPoint1 と controlPoint2) を使用して、現在のポイントと指定した終点の間に 3 次ベジエ曲線を作成します。 C 100,200 200,400 300,200 は、有効な曲線コマンドの例です。 BezierSegment オブジェクトを持つ PathGeometry オブジェクトと同等のオブジェクトを定義します。
| 構文 |
|---|
C controlPoint1 controlPoint2 endPoint -又は- c controlPoint1 controlPoint2 endPoint |
| 用語 | 説明 |
|---|---|
| controlPoint1 | Point 曲線の 1 つ目の制御点。曲線の前半の接線を決定します。 |
| controlPoint2 | Point 曲線の 2 つ目の制御点。曲線の後半の接線を決定します。 |
| endPoint | Point 曲線が描画される点。 |
2 次ベジエ曲線コマンド
コントロール ポイント (controlPoint) を使用して、現在のポイントと指定した終点の間に 2 次ベジエ曲線を作成します。 q 100,200 300,200 は、有効な 2 次ベジエ曲線コマンドの例です。 QuadraticBezierSegment でPathGeometryと同等の値を定義します。
| 構文 |
|---|
Q controlPoint endPoint -又は- q controlPoint endPoint |
| 用語 | 説明 |
|---|---|
| controlPoint | Point 曲線の制御点。曲線の前半と後半の接線を決定します。 |
| endPoint | Point 曲線が描画される点。 |
スムーズ 3 次ベジエ曲線コマンド
現在の点と指定した終点の間に 3 次ベジエ曲線を作成します。 1 つ目の制御点は、現在の点に対する前のコマンドの 2 つ目の制御点のリフレクションと見なされます。 前のコマンドがない場合、または前のコマンドが 3 次ベジエ曲線コマンドまたはスムーズ 3 次ベジエ曲線コマンドでない場合は、最初の制御点が現在の点と一致していると仮定します。 2 番目のコントロール ポイント (曲線の終点のコントロール ポイント) は、 controlPoint2 によって指定されます。 たとえば、 S 100,200 200,300 は、有効なスムーズな 3 次ベジエ曲線コマンドです。 このコマンドは、 PathGeometry の前に曲線セグメントがあった BezierSegment と同等の値を定義します。
| 構文 |
|---|
ScontrolPoint2 エンドポイント -又は- scontrolPoint2 endPoint |
| 用語 | 説明 |
|---|---|
| controlPoint2 | Point 曲線の制御点。曲線の後半の接線を決定します。 |
| endPoint | Point 曲線が描画される点。 |
スムーズ二次ベジエ曲線コマンド
現在の点と指定した終点の間に 2 次ベジエ曲線を作成します。 制御点は、現在の点に対する前のコマンドの制御点のリフレクションと見なされます。 前のコマンドがない場合、または前のコマンドが 2 次ベジエ曲線コマンドまたはスムーズな 2 次ベジエ曲線コマンドでない場合、制御点は現在の点と一致します。 このコマンドは、 PathGeometry の前に曲線セグメントがあった QuadraticBezierSegment と同等の値を定義します。
| 構文 |
|---|
TcontrolPoint エンドポイント -又は- tcontrolPoint エンドポイント |
| 用語 | 説明 |
|---|---|
| controlPoint | Point 曲線の制御点。曲線の前半の接線を決定します。 |
| endPoint | Point 曲線が描画される点。 |
楕円円弧コマンド
現在の点と指定された終点の間に楕円の円弧を作成します。 ArcSegment でPathGeometryと同等の値を定義します。
| 構文 |
|---|
A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint -又は- a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint |
| 用語 | 説明 |
|---|---|
| size | [サイズ] 円弧の x 半径と y 半径。 |
| rotationAngle | Double 楕円の回転 (度単位)。 |
| isLargeArcFlag | 円弧の角度を 180 度以上にする場合は 1 に設定します。それ以外の場合は 0 に設定します。 |
| sweepDirectionFlag | 円弧が正の角度の方向に描画される場合は 1 に設定します。それ以外の場合は 0 に設定します。 |
| endPoint | Point 円弧が描画される点。 |
終了コマンド
現在の図形を終了し、現在の点と図の開始点を結ぶ線を作成します。 このコマンドは、図形の最初のセグメントと最後のセグメントの間に線結合 (コーナー) を作成します。
| 構文 |
|---|
Z -又は- z |
点の構文
ポイントの x 座標と y 座標について説明します。 「 Point」も参照してください。
| 構文 |
|---|
| x,y -又は- xy |
| 用語 | 説明 |
|---|---|
| x | Double 点の x 座標。 |
| y | Double 点の y 座標。 |
補足メモ
標準的な数値ではなく、次の特殊な値を使用することもできます。 これらの値では、大文字と小文字が区別されます。
- Infinity: PositiveInfinity を表します。
- -Infinity: NegativeInfinity を表します。
- NaN: NaNを表します。
小数点または整数を使用する代わりに、科学的表記を使用できます。 たとえば、+1.e17 は有効な値です。
移動コマンドと描画コマンドを生成するデザイン ツール
Blend for Microsoft Visual Studio 2015 で Pen ツールやその他の描画ツールを使用すると、通常、移動コマンドと描画コマンドを含む Path オブジェクトが生成されます。
コントロールの既定のテンプレートWindows ランタイム XAML で定義されているコントロール パーツの一部に、既存の移動および描画コマンド データが表示される場合があります。 たとえば、一部のコントロールでは、移動コマンドと描画コマンドとして定義されたデータを持つ PathIcon を使用します。
XAML 形式でベクターを出力できる他の一般的に使用されるベクター グラフィックス デザイン ツールで使用できるエクスポーターまたはプラグインがあります。 これらは通常、 Path オブジェクトをレイアウト コンテナーに作成し、 Path.Data の移動コマンドと描画コマンドを使用します。 異なるブラシを適用できるように、XAML に複数の Path 要素が存在する場合があります。 これらのエクスポーターやプラグインの多くは、本来は Windows Presentation Foundation (WPF) の XAML や Silverlight 用に作成されたものですが、XAML のパス構文は Windows ランタイム XAML と同じです。 通常、エクスポーターから XAML のチャンクを使用して、Windows ランタイム XAML ページに貼り付けることができます。 (ただし、を使用することはできませんRadialGradientBrush、変換された XAML の一部であった場合は、Windows ランタイム XAML ではそのブラシがサポートされていないためです)。)