パス マークアップ構文

  • [アーティクル]

Browse sample. サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) パス マークアップ構文を使用すると、XAML でパス ジオメトリをコンパクトに指定できます。

パス マークアップ構文は、Path.Data プロパティの文字列の値として指定します。

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

パス マークアップ構文は、省略可能な FillRule 値と 1 つまたは複数の図の説明で構成されています。 この構文は、<Path Data="[fillRule]figureDescription[figureDescription] * " ... /> として表せます。

この構文では:

  • fillRule は、ジオメトリで EvenOdd または Nonzero の塗りつぶしルールを使用するかどうかを指定する省略可能な FillRule です。 F0 は EvenOdd の塗りつぶしルールの指定に使用し、F1 は Nonzero の塗りつぶしルールの指定に使用します。 塗りつぶしルールの詳細については、「Fill rules」をご覧ください。
  • figureDescription は、移動コマンド、描画コマンド、省略可能な終了コマンドで構成される図形を表します。 移動コマンドは、図形の開始位置を指定します。 描画コマンドは図の内容を記述し、省略可能な終了コマンドは図形を閉じます。

上記のパス マークアップ構文の例では、移動コマンド (M) を使用して開始点を指定し、行 (L) コマンドを使用して一連の直線を指定するほか、終了コマンド (Z) を使用してパスを閉じています。

パス マークアップ構文では、コマンドの前後に空白は必要ありません。 文字列があいまいな場合以外は、2 つの数値をコンマまたは空白で区切る必要はありません。

ヒント

パス マークアップ構文は、スケーラブル ベクター グラフィックス (SVG) イメージ パス定義と互換性があるため、SVG 形式からグラフィックスを移植する場合に便利です。

パス マークアップ構文は XAML での使用を目的としていますが、PathGeometryConverter クラス内の ConvertFromInvariantString メソッドを呼び出すことによって、コード内の Geometry オブジェクトに変換できます。

Geometry pathData = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z");

移動コマンド

移動コマンドは、新しい図形の開始位置を指定します。 このコマンドの構文は、MstartPoint または mstartPoint です。

この構文では、startPoint は新しい図形の始点を指定する Point 構造体です。 移動コマンドの後ろに複数の点をリストした場合は、これらの点を結ぶ線が描画されます。

M 10,10 は、有効な移動コマンドの例です。

描画コマンド

描画コマンドは、さまざまな図形コマンドで構成できます。 以下の描画コマンドを使用できます。

  • 線 (L または l)。
  • 水平線 (H または h)。
  • 垂直線 (V または v)。
  • 楕円円弧 (A または a)。
  • 3 次ベジエ曲線 (C または c)。
  • 2 次ベジエ曲線 (Q または q)。
  • スムーズ 3 次ベジエ曲線 (S または s)。
  • スムーズ 2 次ベジエ曲線 (T または t)。

各描画コマンドは、大文字と小文字を区別しない文字で指定されます。 同じ型の複数のコマンドを続けて入力する場合は、重複するコマンドの入力を省略できます。 たとえば、L 100,200 300,400 は、L 100,200 L 300,400 と同等です。

直線コマンド

線コマンドは、現在の点と指定された終点の間に直線を作成します。 このコマンドの構文は、LendPoint または lendPoint です。

この構文では、endPoint は線の終点を表す Point です。

L 20,30 と L 20 30 は、有効な直線コマンドの例です。

直線を PathGeometry オブジェクトとして作成する方法については、「LineSegment を作成する」をご覧ください。

水平線コマンド

水平線コマンドは、現在の点と指定された x 座標の間に水平線を作成します。 このコマンドの構文は、Hx または hx です。

この構文では、 x は線の終点の x 座標を表す double です。

H 90 は、有効な水平線コマンドの例です。

垂直線コマンド

垂直線コマンドは、現在点と指定した y 座標の間に垂直線を作成します。 このコマンドの構文は、Vy または vy です。

この構文では、y は線の端点の y 座標を表す double です。

V 90 は、有効な垂直線コマンドの例です。

楕円円弧コマンド

楕円弧コマンドは、現在の点と指定された終点の間に楕円の円弧を作成します。 このコマンドの構文は次のとおりです： AsizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint または asizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint.

この構文では:

  • sizeは Size で、弧の半径 x と半径 y を表しています。
  • rotationAngle は、楕円の回転を度数で表す double です。
  • isLargeArcFlag は、弧の角度が 180 度以上であれば 1、そうでなければ 0 に設定設定します。
  • sweepDirectionFlag は、円弧が正角方向に描かれる場合は 1、そうでない場合は 0 に設定します。
  • endPoint は弧を描く Point です。

A 150,150 0 1,0 150,-150 は、有効な楕円円弧コマンドの例です。

楕円円弧を PathGeometry オブジェクトとして作成する方法については、「ArcSegment を作成する」をご覧ください。

3 次ベジエ曲線コマンド

3 次ベジエ曲線コマンドは、指定された 2 つの制御点を用いて、現在点と指定された終点との間に 3 次ベジエ曲線を作成します。 このコマンドの構文は、CcontrolPoint1controlPoint2endPoint または ccontrolPoint1controlPoint2endPoint です。

この構文では:

  • controlPoint1 は曲線の最初の制御点を表す Point で、曲線の開始接線を決定します。
  • controlPoint2 は曲線の2番目の制御点を表す Point で、曲線の終了接線を決定します。
  • endPoint は、Point 曲線が描画されるポイントを表します。

C 100,200 200,400 300,200 は、有効な 3 次ベジエ曲線コマンドの例です。

3 次ベジエ曲線を PathGeometry オブジェクトとして作成する方法については、「BezierSegment の作成」をご覧ください。

2 次ベジエ曲線コマンド

2 次ベベジエ曲線コマンドは、指定された制御点を用いて、現在点と指定された終点との間に 2 次ベジエ曲線を作成します。 このコマンドの構文は、QcontrolPointendPoint または qcontrolPointendPoint です。

この構文では:

  • controlPoint は曲線の制御点を表す Point で、曲線の開始接線と終了接線を決定します。
  • endPoint は、Point 曲線が描画されるポイントを表します。

Q 100,200 300,200 は、有効な 2 次ベジエ曲線コマンドの例です。

PathGeometry オブジェクトとして 2 次ベジエ曲線を作成する方法については、「QuadraticBezierSegment を作成する」をご覧ください。

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

スムーズ 3 次ベジエ曲線コマンドは、指定された制御点を使って、現在の点と指定された終点の間に 3 次ベジエ曲線を作成します。 このコマンドの構文は、ScontrolPoint2endPoint または scontrolPoint2endPoint です。

この構文では:

  • controlPoint2 は曲線の2番目の制御点を表す Point で、曲線の終了接線を決定します。
  • endPoint は、Point 曲線が描画されるポイントを表します。

1 つ目の制御点は、前のコマンドの2番目の制御点の、現在の点からの相対的な反射であると仮定されます。 前のコマンドが存在しない場合、または前のコマンドが 3 次ベジエ曲線コマンドまたはスムーズ 3 次ベジエ曲線コマンドでなかった場合、1 つ目の制御点は、現在の点と一致するとみなされます。

S 100,200 200,300 は、有効なスムース 3 次ベジエ曲線コマンドの例です。

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

スムース 2 次ベジエ曲線コマンドは、制御点を使って、現在点と指定した終点の間に 2 次ベジエ曲線を作成します。 このコマンドの構文は、TendPoint または tendPoint です。

この構文では、endPoint は Point であり、曲線が描画されるポイントを表します。

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

T 100,30 は、有効なスムーズ 2 次ベジエ曲線コマンドの例です。

終了コマンド

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

終了コマンドの構文は、Z または z です。

その他の値

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

  • Infinity は double.PositiveInfinity を表します。
  • -Infinity は double.NegativeInfinity を表します。
  • NaN は double.NaN を表します。

さらに、大文字と小文字を区別しない指数表記を使用することもできます。 したがって、+1.e17 は有効な値です。