Xamarin.Forms Shapes: Path

Path 类派生自 Shape 类,可用于绘制曲线和复杂形状。 这些曲线和形状通常使用 Geometry 对象进行描述。 有关 Path 类从 Shape 类继承的属性的信息,请参阅 Xamarin.Forms 形状

Path 定义以下属性:

  • Data,类型为 Geometry,指定要绘制的形状。
  • RenderTransform,类型为 Transform,表示在绘制路径之前应用于路径几何图形的转换。

这些属性由 BindableProperty 对象提供支持,表示它们可以是数据绑定的目标,并可以设置样式。

有关转换的详细信息,请参阅 Xamarin.Forms Path 转换

创建路径

要绘制路径,请创建 Path 对象并设置其 Data 属性。 有两种设置 Data 属性的方法:

  • 可以使用路径标记语法在 XAML 中为 Data 设置字符串值。 通过这种方法,Path.Data 值将使用图形的序列化格式。 通常情况下,创建后不会手动编辑此字符串值。 而是使用设计工具来处理数据,并将其导出为可由 Data 属性使用的字符串片段。
  • 可以将 Data 属性设置为 Geometry 对象。 这可以是特定的 Geometry 对象,也可以是作为容器(将多个几何对象合并为单个对象)的 GeometryGroup

使用路径标记语法创建路径

下面的 XAML 示例演示如何使用路径标记语法绘制三角形:

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

Data 字符串以“move”命令开头,用 M 表示,用于为路径创建绝对起点。 L 是直线命令,用于创建从起点到指定终点的直线。 Z 是关闭命令,用于创建连接当前点和起点的直线。 结果是一个三角形:

路径三角形

有关路径标记语法的详细信息,请参阅 Xamarin.Forms 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,因此图形的第一段和最后一段将连接起来。 结果是一个三角形:

路径三角形

有关几何图形的详细信息,请参阅 Xamarin.Forms 几何图形