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

  • [アーティクル]

ここでは、パスの形状を XAML 属性値として指定するために使うことのできる、移動と描画のコマンド (ミニ言語) について説明します。 移動と描画のコマンドは、ベクター グラフィックや図形の出力に対応するさまざまなデザイン ツールやグラフィックス ツールで、シリアル化形式や交換形式として使われます。

移動と描画のコマンド文字列を使うプロパティ

移動と描画のコマンド構文は、XAML の内部型コンバーターによってサポートされます。コンバーターはコマンドを解析し、実行時にグラフィックス表現を生成します。 この表現は、基本的には完成したベクター セットであり、そのまま表示することができます。 ただし、ベクター自体では表現の詳細までは定義されないため、他の値を要素に設定する必要もあります。 Path オブジェクトについては、Fill や Stroke などのプロパティに値を設定してから、その Path を何らかの方法でビジュアル ツリーに関連付ける必要もあります。 PathIcon オブジェクトでは、Foreground プロパティを設定します。

Windows ランタイムには、移動と描画のコマンドを表す文字列を使うことのできるプロパティとして、Path.Data と PathIcon.Data の 2 つがあります。 通常、これらのプロパティに移動と描画のコマンドを指定するときは、その要素に必要な他の属性と共に、コマンドを 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 では、移動と描画のコマンドにより、単一の PathFigure オブジェクトと Figures プロパティの値を持つ PathGeometry が生成されます。 各描画コマンドは、その単一の PathFigure の Segments コレクションに PathSegment 派生クラスを生成します。移動コマンドは StartPoint を変更します。終了コマンドがある場合は、IsClosed が true に設定されます。 実行時に Data の値を調べると、この構造をオブジェクト モデルとしてたどることができます。

基本構文

移動と描画のコマンド構文を簡単にまとめると、次のようになります。

  1. まず、オプションの塗りつぶしルールを指定します。 通常、これを指定するのは、既定の EvenOdd では望ましくない場合だけです (EvenOdd については後ほど詳しく説明します)。
  2. 移動コマンドを 1 つだけ指定します。
  3. 1 つ以上の描画コマンドを指定します。
  4. 終了コマンドを指定します。 終了コマンドは省略することもできますが、その場合は図が開いたままになります (これは一般的ではありません)。

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

  • 各コマンドは 1 文字で表されます。
  • コマンドの文字は大文字または小文字で指定できます。 後で説明するように、大文字と小文字は区別されます。
  • 通常、終了コマンド以外の各コマンドには 1 つ以上の数値が続きます。
  • 1 つのコマンドに複数の数値を指定する場合は、コンマまたはスペースで区切ります。

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

描画コマンドの多くでは点が使われますが、これは x,y 値として指定します。 *points というプレースホルダーで示されている部分には、点の x,y 値として 2 つの 10 進数値を指定できます。

空白がなくても結果があいまいにならない場合は、空白を省略できます。 すべての数値 (ポイントとサイズ) の区切り文字をコンマにすると、空白をすべて省略することができます。 たとえば、F1M0,58L2,56L6,60L13,51L15,53L6,64z という使い方は正当です。 ただし、読みやすくするために、コマンドの間には空白を含めるのが一般的です。

コンマを 10 進数の小数点として使わないでください。コマンド文字列は XAML によって解釈され、en-us ロケール以外で使われるカルチャ固有の数値形式の規則は考慮されません。

構文仕様

塗りつぶしルール

オプションの塗りつぶしルールとして指定できる値には、F0 と F1 の 2 つがあります (F は常に大文字です)。F0 が既定のルールです。これは EvenOdd の塗りつぶし動作になるので、通常は指定しません。 Nonzero の塗りつぶし動作を有効にするには、F1 を使います。 これらの塗りつぶしの値は、FillRule 列挙体の値と対応しています。

移動コマンド

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

構文
M startPoint
- または -
mstartPoint
期間 説明
startPoint ポイント
新しい図形の始点。

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

注 移動コマンドに続けて複数の点を指定することもできます。 これらの点の間には、直線コマンドを指定した場合と同様に直線が描画されます。 ただし、これは推奨されるスタイルではありません。代わりに専用の直線コマンドを使ってください。

描画コマンド

描画コマンドはいくつかの図形コマンドから構成されます。図形コマンドには、直線、水平線、垂直線、三次ベジエ曲線、二次ベジエ曲線、平滑三次ベジエ曲線、平滑二次ベジエ曲線、楕円円弧があります。

すべての描画コマンドで大文字と小文字が区別されます。 大文字は絶対座標を示し、小文字は前のコマンドからの相対座標を示します。

セグメントの制御点は、前のセグメントの終点からの相対値で表されます。 同じ種類のコマンドを複数回続けて入力するときは、重複するコマンドの入力を省略できます。 たとえば、L 100,200 300,400 は、L 100,200 L 300,400 と同じです。

直線コマンド

現在の点と指定された終点の間に直線を作成します。 たとえば、l 20 30 や L 20,30 は有効な直線コマンドです。 LineGeometry オブジェクトと同等の結果が定義されます。

構文
LendPoint
- または -
lendPoint
期間 説明
endPoint ポイント
線の終点。

水平線コマンド

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

構文
H x
- または -
h x
期間 説明
x Double
直線の終点の x 座標。

垂直線コマンド

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

構文
V y
- または -
v y
期間 説明
y Double
直線の終点の y 座標。

三次ベジエ曲線コマンド

指定した 2 つの制御点 (controlPoint1 と controlPoint2) を使って、現在の点と指定した終点の間に三次ベジエ曲線を作成します。 C 100,200 200,400 300,200 は、有効な曲線コマンドの例です。 BezierSegment オブジェクトを持つ PathGeometry オブジェクトと同等の結果が定義されます。

構文
C controlPoint1controlPoint2endPoint
- または -
c controlPoint1controlPoint2endPoint
用語 説明
controlPoint1 ポイント
曲線の 1 つ目の制御点。曲線の前半の接線を決定します。
controlPoint2 ポイント
曲線の 2 つ目の制御点。曲線の後半の接線を決定します。
endPoint ポイント
曲線が描画される点。

二次ベジエ曲線コマンド

指定した制御点 (controlPoint) を使って、現在の点と指定した終点の間に二次ベジエ曲線を作成します。 たとえば、q 100,200 300,200 は有効な二次ベジエ曲線コマンドです。 QuadraticBezierSegment を持つ PathGeometry と同等の結果が定義されます。

構文
Q controlPoint endPoint
- または -
q controlPoint endPoint
用語 説明
controlPoint ポイント
曲線の制御点。曲線の前半と後半の接線を決定します。
endPoint ポイント
曲線が描画される点。

平滑三次ベジエ曲線コマンド

現在の点と指定した終点の間に三次ベジエ曲線を作成します。 1 つ目の制御点は、現在の点に対する前のコマンドの 2 つ目の制御点のリフレクションと見なされます。 前のコマンドがない場合や、前のコマンドが三次ベジエ曲線コマンドまたは平滑三次ベジエ曲線コマンドでない場合、1 つ目の制御点は現在の点と一致すると見なされます。 2 つ目の制御点 (曲線の終端の制御点) は、controlPoint2 によって指定します。 たとえば、 S 100,200 200,300 は有効な平滑三次ベジエ曲線コマンドです。 このコマンドは、前に曲線セグメントがある場合の、BezierSegment を持つ PathGeometry と同等の結果を定義します。

構文
ScontrolPoint2endPoint
- または -
scontrolPoint2 endPoint
用語 説明
controlPoint2 ポイント
曲線の制御点。曲線の後半の接線を決定します。
endPoint ポイント
曲線が描画される点。

平滑二次ベジエ曲線コマンド

現在の点と指定した終点の間に二次ベジエ曲線を作成します。 制御点は、現在の点に対する前のコマンドの制御点のリフレクションと見なされます。 前のコマンドがない場合や、前のコマンドが二次ベジエ曲線コマンドまたは平滑二次ベジエ曲線コマンドでない場合、制御点は現在の点と一致します。 このコマンドは、前に曲線セグメントがある場合の、QuadraticBezierSegment を持つ PathGeometry と同等の結果を定義します。

構文
TcontrolPointendPoint
- または -
tcontrolPointendPoint
用語 説明
controlPoint ポイント
曲線の制御点。曲線の前半の接線を決定します。
endPoint ポイント
曲線が描画される点。

楕円円弧コマンド

現在の点と指定された終点の間に楕円の円弧を作成します。 ArcSegment を持つ PathGeometry と同等の結果が定義されます。

構文
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
- または -
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
用語 説明
size サイズ
円弧の x 半径と y 半径。
rotationAngle Double
楕円の回転 (度単位)。
isLargeArcFlag 円弧の角度を 180 度以上にする場合は 1 に設定します。それ以外の場合は 0 に設定します。
sweepDirectionFlag 円弧が正の角度の方向に描画される場合は 1 に設定します。それ以外の場合は 0 に設定します。
endPoint ポイント
円弧が描画される点。

終了コマンド

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

構文
Z
または
z

点の構文

点の x 座標と y 座標を記述します。 Point もご覧ください。

構文
x,y
- または -
xy
項目 説明
x Double
点の x 座標。
y Double
点の y 座標。

補足メモ

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

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

10 進数や整数を使う代わりに、指数表記を使うこともできます。 たとえば、+1.e17 は有効な値です。

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

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

Windows ランタイムのコントロール用の既定の XAML テンプレートを見ると、定義されているコントロールのパーツの一部に、移動と描画のコマンドのデータが含まれていることに気付くことがあります。 たとえば、一部のコントロールで使われる PathIcon では、データが移動と描画のコマンドとして定義されています。

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