Share via

Xamarin.Forms のシェイプ: Path

  • [アーティクル]

Path クラスは、Shape クラスから派生したもので、曲線や複雑な図形を描画するために使用できます。 これらの曲線と図形は、通常、Geometry オブジェクトを使用して記述します。 Path クラスが Shape クラスから継承するプロパティについては、「Xamarin.Forms の Shape」を参照してください。

Path には、次のプロパティが定義されています。

  • Data は Geometry 型で、描画する図形を指定します。
  • RenderTransform は Transform 型で、描画前にパスのジオメトリに適用される変換を表します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

変換の詳細については、Xamarin.Forms の Path の変換に関する記事を参照してください。

パスを作成する

パスを描画するには、Path オブジェクトを作成し、その Data プロパティを設定します。 Data プロパティを設定する方法は 2 つあります。

  • パス マークアップ構文を使用して、XAML で Data の文字列値を設定できます。 この方法では、Path.Data 値はグラフィックスのシリアル化形式を使用しています。 通常、この文字列値は、作成後に手動で編集しません。 代わりに、デザイン ツールを使用してデータを操作し、Data プロパティで使用できる文字列フラグメントとしてエクスポートします。
  • Data プロパティを Geometry オブジェクトに設定できます。 特定の Geometry オブジェクト、または複数のジオメトリ オブジェクトを 1 つのオブジェクトに結合できるコンテナーとして機能する GeometryGroup を設定できます。

パス マークアップ構文を使用してパスを作成する

次の XAML の例は、パス マークアップ構文を使用して三角形を描画する方法を示しています。

<Path Data="M 10,100 L 100,100 100,50Z"
      Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start" />

Data 文字列は、M で示される移動コマンドで始まり、パスの絶対的な始点を確立します。 L は、始点から指定した終点までの直線を作成する直線コマンドです。 Z は閉じるコマンドで、現在の点と始点を結ぶ線を作成します。 この結果、次のような三角形になります。

パスの三角形

パスのマークアップ構文の詳細については、Xamarin.Forms の Path マークアップ構文に関する記事を参照してください。

Geometry オブジェクトを使用してパスを作成する

曲線と図形は、Geometry オブジェクトを使用して記述できます。Path オブジェクトの Data プロパティを設定するために使用されます。 さまざまな Geometry オブジェクトから選択できます。 EllipseGeometry、LineGeometry、RectangleGeometry の各クラスは、比較的単純な図形を記述します。 より複雑な図形を作成したり、曲線を作成したりするには、PathGeometry を使用します。

PathGeometry オブジェクトは、1 つ以上の PathFigure オブジェクトで構成されます。 PathFigure オブジェクトは、それぞれ異なる図形を表します。 各 PathFigure オブジェクトは、1 つまたは複数の PathSegment オブジェクトで構成され、それぞれ図形の接続部分を表します。 セグメント タイプには、LineSegment クラス、BezierSegment クラス、ArcSegment クラスがあります。

次の XAML の例は、PathGeometry オブジェクトを使用して三角形を描画する方法を示しています。

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True"
                                StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="100,100" />
                                <LineSegment Point="100,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、三角形の始点は (10,100) です。 線分は、(10,100) から (100,100)、(100,100) から (100,50) まで描画されます。 続いて、PathFigure.IsClosed プロパティが true に設定されているため、図の最初と最後のセグメントが接続されます。 この結果、次のような三角形になります。

パスの三角形

ジオメトリの詳細については、Xamarin.Forms の Geometryに関する記事を参照してください。