通过

Xamarin.Forms 形状：Path 标记语法

  • 项目

Xamarin.Forms Path 标记语法使你能够在 XAML 中紧凑地指定路径几何图形。 该语法指定为 Path.Data 属性的字符串值：

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

路径标记语法由可选的 FillRule 值和一个或多个图形说明组成。 此语法可以表示为：<Path Data="[fillRule] figureDescription [figureDescription] * " ... />

在此语法中：

  • fillRule 是一个可选的 Xamarin.Forms.Shapes.FillRule，指定几何图形是应使用 EvenOdd 还是 NonzeroFillRule。 F0 用于指定 EvenOdd 填充规则，而 F1 用于指定 Nonzero 填充规则。 有关填充规则的详细信息，请参阅 Xamarin.Forms 形状：填充规则。
  • figureDescription 表示由移动命令、绘制命令和可选的关闭命令组成的图形。 移动命令用于指定图形的起点。 绘制命令的作用是描述图形的内容，可选的关闭命令则用于关闭图形。

在上面的示例中，路径标记语法使用移动命令 (M) 指定起点，使用直线命令 (L) 指定一系列直线，并使用关闭命令 (Z) 关闭路径。

在路径标记语法中，无需在命令前后加空格。 此外，两个数字之间不必用逗号或空格分隔，但仅在字符串含义明确时可以这样做。

提示

路径标记语法与可扩展矢量图形 (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 是一个 double，表示直线终点的 X 坐标。

H 90 是有效水平线命令的示例。

竖线命令

垂直线命令可在当前点和指定的 y 坐标之间创建一条垂直线。 此命令的语法为：Vy 或 vy。

在此语法中，y 是一个 double，表示直线终点的 Y 坐标。

V 90 是有效竖线命令的示例。

椭圆弧命令

椭圆弧线命令可在当前点和指定终点之间创建椭圆弧线。 此命令的语法为：Asize rotationAngle isLargeArcFlag sweepDirectionFlag endPoint 或 asize rotationAngle isLargeArcFlag sweepDirectionFlag endPoint。

在此语法中：

  • size 是表示弧线 x 和 y 半径的 Size。
  • rotationAngle 是表示椭圆旋转量（以度为单位）的 double。
  • 如果圆弧角度应为 180 度或更大，请将 isLargeArcFlag 设置为 1，否则设置为 0。
  • 如果以正角方向绘制圆弧，请将 sweepDirectionFlag 设置为 1，否则设置为 0。
  • endPoint 是绘制弧线的 Point。

A 150,150 0 1,0 150,-150 是有效椭圆弧线命令的示例。

有关将椭圆弧线创建为 PathGeometry 对象的信息，请参阅创建 ArcSegment。

三次贝塞尔曲线命令

三次贝塞尔曲线命令会通过使用两个指定的控制点，在当前点和指定的终点之间创建三次贝塞尔曲线。 此命令的语法为：CcontrolPoint1 controlPoint2 endPoint 或 ccontrolPoint1 controlPoint2 endPoint。

在此语法中：

  • controlPoint1 是 Point，表示曲线的第一个控制点，它决定曲线的起始切线。
  • controlPoint2 是 Point，表示曲线的第二个控制点，它决定曲线的结束切线。
  • endPoint 是 Point，表示绘制曲线的点。

C 100,200 200,400 300,200 是有效三次贝塞尔曲线命令的示例。

有关将三次贝塞尔曲线创建为 PathGeometry 对象的信息，请参阅创建 BezierSegment。

二次贝塞尔曲线命令

二次贝塞尔曲线命令会通过使用指定的控制点，在当前点和指定的终点之间创建二次贝塞尔曲线。 此命令的语法为：QcontrolPoint endPoint 或 qcontrolPoint endPoint。

在此语法中：

  • controlPoint 是 Point，表示曲线的控制点，它决定曲线的开始和结束切线。
  • endPoint 是 Point，表示绘制曲线的点。

Q 100,200 300,200 为有效二次贝塞尔曲线命令的示例。

有关将二次贝塞尔曲线创建为 PathGeometry 对象的信息，请参阅创建 QuadraticBezierSegment。

平滑三次贝塞尔曲线命令

平滑三次贝塞尔曲线命令会通过使用指定的控制点，在当前点和指定的终点之间创建三次贝塞尔曲线。 此命令的语法为：ScontrolPoint2 endPoint 或 scontrolPoint2 endPoint。

在此语法中：

  • controlPoint2 是 Point，表示曲线的第二个控制点，它决定曲线的结束切线。
  • endPoint 是 Point，表示绘制曲线的点。

假设第一控制点为相对当前点前一命令的第二控制点的反射。 如果没有前一命令，或者前一命令不是三次贝塞尔曲线命令或平滑三次贝塞尔曲线命令，则假设第一个控制点与当前点重合。

S 100,200 200,300 是有效平滑三次贝塞尔曲线命令的示例。

平滑二次贝塞尔曲线命令

平滑二次贝塞尔曲线命令会通过使用控制点，在当前点和指定的终点之间创建二次贝塞尔曲线。 此命令的语法为：TendPoint 或 tendPoint。

在此语法中，endPoint 是 Point，表示绘制曲线的点。

假设控制点为相对于当前点前一命令的控制点的反射。 如果没有前一命令，或者前一命令不是二次贝塞尔曲线命令或平滑二次贝塞尔曲线命令，则假设控制点与当前点重合。

T 100,30 是有效平滑二次贝塞尔曲线命令的示例。

关闭命令

关闭命令会结束当前图形，并创建一条将当前点连接到图形起点的直线。 因此，此命令可以在图形最后一段与第一段之间创建一条连接线。

关闭命令的语法是：Z 或 z。

其他值

除了标准数值外，还可使用以下区分大小写的特殊值：

  • Infinity 表示 double.PositiveInfinity。
  • -Infinity 表示 double.NegativeInfinity。
  • NaN 表示 double.NaN。

此外，还可以使用不区分大小写的科学记数法。 因此，+1.e17 是有效值。