共用方式為


Xamarin.Forms 圖形:路徑

類別 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 命令,它會建立一行,將目前點連接到起點。 結果是三角形:

路徑三角形

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

使用 Geometry 物件建立 Path

您可以使用 物件來描述 Geometry 曲線和圖形,這些物件可用來設定 Path 物件的 Data 屬性。 有各種不同的 Geometry 物件 (部分機器翻譯) 可供選擇。 EllipseGeometry (部分機器翻譯)、LineGeometry (部分機器翻譯) 和 RectangleGeometry 類別 (部分機器翻譯) 描述相對簡單的圖形。 若要建立更複雜的圖形或建立曲線,請使用 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。 結果是三角形:

路徑三角形

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