Xamarin.Forms 圖形:路徑

Download Sample 下載範例

類別 Path 衍生自 Shape 類別,可用來繪製曲線和複雜圖形。 這些曲線和圖形通常會使用 Geometry 物件來描述。 如需類別繼承自 類別之屬性Path的資訊,請參閱 Xamarin.Forms ShapesShape

Path 會定義下列屬性:

  • Data型別為 的 Geometry,指定要繪製的圖形。
  • RenderTransformTransform別為 的 ,表示在繪製路徑之前套用至路徑幾何的轉換。

這些屬性是由 BindableProperty 物件所支援,這表示這些屬性可以是數據系結的目標,並設定樣式。

如需轉換的詳細資訊,請參閱 Xamarin.Forms 路徑轉換

建立路徑

若要繪製路徑,請建立 Path 物件並設定其 Data 屬性。 設定 屬性有兩種技巧 Data

  • 您可以使用路徑標記語法,在 XAML 中設定 的字串值 Data 。 使用此方法時 Path.Data ,值會取用圖形的串行化格式。 一般而言,建立此字串值之後,您不會手動編輯此字串值。 相反地,您可以使用設計工具來操作數據,並將它匯出為 屬性消耗 Data 的字串片段。
  • 您可以將 屬性設定 DataGeometry 物件。 這可以是特定 Geometry 物件,或 GeometryGroup 做為容器,可將多個幾何對象合併成單一物件。

建立路徑標記語法的路徑

下列 XAML 範例示範如何使用路徑標記語法繪製三角形:

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

字串 Data 會以move命令開頭,以 M表示,這會建立路徑的絕對起點。 L 是line命令,它會建立從起點到指定終點的直線。 Z 是 close 命令,它會建立一行,將目前點連接到起點。 結果是三角形:

Path triangle

如需路徑標記語法的詳細資訊,請參閱 Xamarin.Forms 路徑標記語法

使用 Geometry 物件建立 Path

您可以使用 物件來描述 Geometry 曲線和圖形,這些物件可用來設定 Path 物件的 Data 屬性。 有各種不同的 Geometry 物件可供選擇。 EllipseGeometryLineGeometryRectangleGeometry 類別描述相對簡單的圖形。 若要建立更複雜的圖形或建立曲線,請使用 PathGeometry

PathGeometry 物件是由一或多個 PathFigure 對象所組成。 每個 PathFigure 物件都代表不同的圖形。 每個 PathFigure 物件本身是由一或多個 PathSegment 對象所組成,每個物件都代表圖形的連接部分。 區段類型包括下列 LineSegmentBezierSegmentArcSegment 類別。

下列 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。 結果是三角形:

Path triangle

如需幾何的詳細資訊,請參閱 Xamarin.Forms 幾何