Share via

Xamarin.Forms 図形: パス マークアップ構文

  • [アーティクル]

Xamarin.Forms パス マークアップ構文を使用すると、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 を使用するか、NonzeroFillRule を使用するかを指定する省略可能な Xamarin.Forms.Shapes.FillRule です。 F0 は EvenOdd 塗りつぶしルールを指定するために使用されるのに対して、F1 は Nonzero 塗りつぶしルールを指定するために使用されます。 塗りつぶしルールの詳細については、「Xamarin.Forms 図形: 塗りつぶしルール」を参照してください。
  • 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)
  • 三次ベジエ曲線 (C または c)
  • 二次ベジエ曲線 (Q または q)。
  • スムーズ三次ベジエ曲線 (S または s)
  • スムーズ二次ベジエ曲線 (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 は、円弧の x 半径と y 半径を表す Size です。
  • 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 次ベジエ曲線コマンドの例です。

2 次ベジエ曲線を PathGeometry オブジェクトとして作成する方法については、「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 次 3 次ベジエ曲線コマンドの例です。

終了コマンド

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

Z コマンドの正しい構文は z です。

その他の値

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

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

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