次の方法で共有

移動と描画のコマンド構文

パス ジオメトリを 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を使う方法

Windows ランタイム XAML の場合、移動コマンドと描画コマンドは、Figures プロパティ値を持つ 1 つの PathFigure オブジェクトを持つ PathGeometry を生成します。 各描画コマンドは、その 1 つの PathFigure の Segments コレクションで PathSegment 派生クラスを生成し、移動コマンドによって StartPoint が変更され、close コマンドの存在によって IsClosed がtrue に設定されます。 実行時に データ 値を調べる場合は、この構造体をオブジェクト モデルとして移動できます。

基本的な構文

移動コマンドと描画コマンドの構文は、次のように要約できます。

  1. オプションの塗りつぶしルールから始めます。 通常、 EvenOdd の既定値が必要ない場合にのみ、これを指定します。 ( EvenOdd の詳細については後で説明します)。
  2. 移動コマンドを 1 つだけ指定します。
  3. 1 つ以上の描画コマンドを指定します。
  4. 閉じるコマンドを指定します。 close コマンドは省略できますが、その場合、図は開いたままになります (一般的ではありません)。

この構文の一般的な規則は次のとおりです。

  • 各コマンドは、正確に 1 文字で表されます。
  • その文字には大文字または小文字を使用できます。 ここでは説明するように、ケースが重要です。
  • 通常、close コマンドを除く各コマンドの後に 1 つ以上の数値が続きます。
  • コマンドに複数の数値を指定する場合は、コンマまたはスペースで区切ります。

[fillRule]moveCommanddrawCommand[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キーを使用して非ゼロの塗りつぶし動作を設定します。 これらの塗りつぶしの値は、 FillRule 列挙体の値と一致します。

[移動] コマンド

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

構文
M startPoint
または
m startPoint
任期 Description
startPoint 点
新しい図形の開始点。

大文字 の M は、 startPoint が絶対座標であることを示します。小文字 の m は 、startPoint が前のポイントへのオフセットであることを示し、前のポイントがなかった場合は (0,0) を示します。

手記 move コマンドの後に複数のポイントを指定することは有効です。 線コマンドを指定した場合と同様に、線がそれらの点に描画されます。 ただし、これは推奨されるスタイルではありません。代わりに専用の行コマンドを使用してください。

描画コマンド

描画コマンドは、線、水平線、垂直線、3 次ベジエ曲線、2 次ベジエ曲線、滑らかな 3 次ベジエ曲線、滑らかな 2 次ベジエ曲線、楕円円弧など、複数の図形コマンドで構成できます。

すべての描画コマンドにおいて、大文字と小文字の区別が重要です。 大文字は絶対座標を表し、小文字は前のコマンドを基準とした座標を表します。

セグメントのコントロール ポイントは、前のセグメントの終点を基準にしています。 同じ種類の複数のコマンドを順番に入力する場合は、重複するコマンド エントリを省略できます。 たとえば、L 100,200 300,400 は、L 100,200 L 300,400 と同じです。

ライン コマンド

現在の点と指定した終点の間に直線を作成します。 l 20 30 および L 20,30 は、有効な行コマンドの例です。 LineGeometry オブジェクトと同等のオブジェクトを定義します。

構文
L エンドポイント
または
l エンドポイント
任期 Description
エンドポイント 点
線の終点。

水平線コマンド

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

構文
H x
-又は-
h x
任期 Description
x ダブル
線の終点の x 座標。

垂直線コマンド

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

構文
V y
-又は-
v y
任期 Description
y ダブル
線の終点の y 座標。

[3 次ベジエ曲線] コマンド

指定した 2 つのコントロール ポイント (controlPoint1 と controlPoint2) を使用して、現在のポイントと指定した終点の間に 3 次ベジエ曲線を作成します。 C 100,200 200,400 300,200 は、有効な曲線コマンドの例です。 PathGeometry オブジェクトに BezierSegment オブジェクトが含まれる同等のオブジェクトを定義します。

構文
C controlPoint1controlPoint2endPoint
-又は-
c controlPoint1controlPoint2endPoint
任期 Description
controlPoint1 点
曲線の最初の制御点。曲線の開始接線を決定します。
controlPoint2 点
曲線の終了接線を決定する曲線の 2 番目の制御点。
エンドポイント 点
曲線が描画されるポイント。

2 次ベジエ曲線コマンド

指定したコントロール ポイント (controlPoint) を使用して、現在のポイントと指定した終点の間に 2 次ベジエ曲線を作成します。 q 100,200 300,200 は、有効な 2 次ベジエ曲線コマンドの例です。 QuadraticBezierSegment を使用して、PathGeometry と同等の値を定義します。

構文
Q controlPoint endPoint
-又は-
q 制御点 終端点
任期 Description
controlPoint 点
曲線の始点と終点の接線を決定する曲線の制御点。
エンドポイント 点
曲線が描画されるポイント。

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

現在の点と指定した終点の間に 3 次ベジエ曲線を作成します。 1 番目の制御ポイントは、現在のポイントに対する前のコマンドの 2 番目の制御ポイントの反射であると見なされます。 前のコマンドがない場合、または前のコマンドが 3 次ベジエ曲線コマンドまたはスムーズ 3 次ベジエ曲線コマンドでない場合は、最初の制御点が現在の点と一致していると仮定します。 2 番目のコントロール ポイント (曲線の終点のコントロール ポイント) は 、controlPoint2 によって指定されます。 たとえば、 S 100,200 200,300 は、有効なスムーズな 3 次ベジエ曲線コマンドです。 このコマンドは、前に曲線セグメントがあった BezierSegment を使用して PathGeometry と同等の値を定義します。

構文
S controlPoint2endPoint
-又は-
s 制御点2 終点
任期 Description
controlPoint2 点
曲線の終了接線を決定する曲線の制御点。
エンドポイント 点
曲線が描画されるポイント。

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

現在の点と指定した終点の間に 2 次ベジエ曲線を作成します。 コントロール ポイントは、現在のポイントに対する前のコマンドの制御ポイントのリフレクションと見なされます。 前のコマンドがない場合、または前のコマンドが 2 次ベジエ曲線コマンドまたはスムーズな 2 次ベジエ曲線コマンドでない場合、制御点は現在の点と一致します。 このコマンドは、曲線セグメントの前に存在していた 2 次関数BezierSegment を使用して PathGeometry と同等の値を定義します。

構文
T controlPointendPoint
-又は-
t controlPointendPoint
任期 Description
controlPoint 点
曲線の始点と接線を決定する曲線の制御点。
エンドポイント 点
曲線が描画されるポイント。

楕円円弧コマンド

現在の点と指定した終点の間に楕円円弧を作成します。 ArcSegment を使用して PathGeometry と同等の値を定義します。

構文
A サイズ回転角度大きな弧フラグスイープ方向フラグエンドポイント
-又は-
a サイズ回転角度ラージアークフラグスイープ方向フラグ終点
任期 Description
大きさ 大きさ
円弧の x 半径と y 半径。
rotationAngle ダブル
楕円の回転角度。
isLargeArcFlag 円弧の角度を 180 度以上にする必要がある場合は、1 に設定します。それ以外の場合は 0 に設定します。
sweepDirectionFlag 円弧が正の角度の方向に描画される場合は 1 に設定します。それ以外の場合は 0 に設定します。
エンドポイント 点
円弧が描画されるポイント。

[閉じる] コマンド

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

構文
Z
-又は-
z

ポイント構文

ポイントの x 座標と y 座標について説明します。 「 ポイント」も参照してください。

構文
x、y
-又は-
xy
任期 Description
x ダブル
ポイントの x 座標。
y ダブル
点の y 座標。

その他の注意事項

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

  • Infinity: PositiveInfinity を表します。
  • -Infinity: NegativeInfinity を表します。
  • NaN: NaN を表します。

小数点または整数を使用する代わりに、科学的表記を使用できます。 たとえば、 +1.e17 は有効な値です。

移動コマンドと描画コマンドを生成するデザイン ツール

Blend for Microsoft Visual Studio 2015 で ペン ツールやその他の描画ツールを使用すると、通常、移動コマンドと描画コマンドを使用して Path オブジェクトが生成されます。

コントロールの Windows ランタイム XAML の既定のテンプレートで定義されているコントロール パーツの一部に、既存の移動および描画コマンド データが表示される場合があります。 たとえば、一部のコントロールでは、移動コマンドと描画コマンドとして定義されたデータを持つ PathIcon が使用されます。

XAML 形式でベクターを出力できる他の一般的に使用されるベクター グラフィックス デザイン ツールで使用できるエクスポーターまたはプラグインがあります。 これらは通常、Path.Data の移動コマンドと描画コマンドを使用して、レイアウト コンテナーに Path オブジェクトを作成します。 異なるブラシを適用できるように、XAML に複数の Path 要素が存在する場合があります。 これらのエクスポーターまたはプラグインの多くは、もともと Windows Presentation Foundation (WPF) XAML または Silverlight 用に記述されていましたが、XAML パス構文は Windows ランタイム XAML と同じです。 通常、エクスポーターから XAML のチャンクを使用して、Windows ランタイム XAML ページに貼り付けることができます。 (ただし、変換された XAML の一部であった場合、Windows ランタイム XAML ではそのブラシがサポートされていないため、 RadialGradientBrush を使用することはできません)。

  • Last updated on