Path 元素允许渲染由不同几何命令组成的通用形状。可以对路径形状进行填充和描边。
当不作为布局的一部分时，若未指定宽度或高度，则默认为父元素 100% 的宽度或高度。
路径可以通过两种不同的方式定义：
- 使用 SVG 路径命令的字符串形式
- 使用
.slint标记中的路径命令元素。
几何命令中使用的坐标位于该路径的虚拟坐标系内。 在屏幕上渲染时，形状相对于 x 和 y 属性进行绘制。如果 width 和 height 属性非零，则整个形状会被缩放以适应这些边界。
属性
fill
brush default: a transparent brush
用于填充路径形状的颜色。
fill-rule
enum FillRule default: nonzero
用于路径的填充规则。
FillRule
此枚举描述了如何确定由路径描述的形状的内部。
nonzero：SVG 中定义的 “nonzero” 填充规则。evenodd：SVG 中定义的 “evenodd” 填充规则
stroke
brush default: a transparent brush
用于绘制路径轮廓的颜色。
stroke-width
length default: 0px
轮廓的宽度。
stroke-line-cap
enum LineCap default: butt
路径轮廓端点的外观。
LineCap
此枚举描述描边路径端点的外观。
butt：描边以垂直于路径的平直边缘结束。round：描边以圆角边缘结束。square：描边以延伸到路径之外的方形端部结束。
stroke-line-join
enum LineJoin default: miter
描边路径各段之间连接处的外观。
LineJoin
此枚举描述描边路径各段之间连接处的外观。
miter：描边以尖角连接，必要时根据斜接限制对尖角进行裁剪。round：描边以平滑的圆角连接。bevel：描边以斜角（扁平）连接。
stroke-miter-limit
float default: 4
当 stroke-line-join 设置为 miter 时，斜接长度与描边宽度的比率上限。 当超过该限制时，连接处将改为以斜角方式渲染。
width
length default: 0px
如果非零，路径将被缩放以适应指定的宽度。
height
length default: 0px
如果非零，路径将被缩放以适应指定的高度。
Viewbox 属性
viewbox-x
float default: 0.0
viewbox-y
float default: 0.0
viewbox-width
float default: 0.0
viewbox-height
float default: 0.0
这四个属性用于在路径坐标系中定义路径视口的位置和大小。
如果 viewbox-width 或 viewbox-height 小于或等于零，则忽略 viewbox 属性， 而是使用所有路径元素的边界矩形来定义视口。
fit
enum ImageFit default: contain
定义路径的 view box 如何缩放以适应元素的宽度和高度。 如果未定义 view box，则使用隐式的边界矩形。
ImageFit
此枚举定义了源图像或路径如何适应 Image 或 Path 元素。
fill：缩放并拉伸源内容以适应元素的宽度和高度。contain：缩放源内容以适应元素的尺寸，同时保持宽高比。cover：缩放源内容以覆盖元素的尺寸，同时保持宽高比。如果宽高比不匹配，源内容将被裁剪以适应。preserve：以逻辑像素为单位保留源内容的尺寸。源内容仍会按应用于窗口中所有元素的缩放因子进行缩放。任何多余的空间将留空。
clip
bool default: false
默认情况下，当路径定义了 view box 并且元素渲染到 其外部时，它们仍然会被渲染。当此属性设置为 true 时，渲染将 被裁剪到 view box 的边界。
anti-alias
bool default: true
默认情况下，路径的填充和描边会进行抗锯齿渲染，以获得最佳质量。某些 GPU 在使用抗锯齿渲染和动画时存在性能问题。将该值设置为 false 可能会以牺牲路径的平滑度为代价来提高帧率。
使用 SVG 命令的路径
SVG 是一种流行的可缩放图形文件格式，通常由路径组成。在 SVG 中， 路径通过 命令 组合而成， 这些命令写在一个字符串中。在 .slint 中，路径命令通过 commands 属性提供。下面的示例渲染一个由圆弧和矩形组成的形状，由 line-to、 move-to 和 arc 命令组成：
export component Example inherits Path { width: 100px; height: 100px; commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z"; stroke: red; stroke-width: 1px;}命令通过属性提供：
Commands
string default: ""
根据 SVG 路径规范提供命令的字符串。 此属性只能在绑定中设置，不能在表达式中访问。
使用 SVG 路径元素的路径
路径的形状也可以使用与 SVG 路径命令类似但使用 .slint 标记语法的元素来描述。 上面使用 SVG 命令的示例也可以写成这样：
export component Example inherits Path { width: 100px; height: 100px; stroke: blue; stroke-width: 1px;
MoveTo { x: 0; y: 0; } LineTo { x: 0; y: 100; } ArcTo { radius-x: 1; radius-y: 1; x: 100; y: 100; } LineTo { x: 100; y: 0; } Close { }}请注意，路径元素的坐标不使用单位——它们在可缩放路径的虚拟 坐标系中运作。
Path 的 MoveTo 子元素
MoveTo 子元素会在存在的情况下关闭当前子路径，并将当前点 移动到由 x 和 y 属性指定的位置。后续的 LineTo 等元素 将以此新位置作为其起点，因此这将开启一个新的子路径。
x
float default: 0.0
新当前点的 x 位置。
y
float default: 0.0
新当前点的 y 位置。
Path 的 LineTo 子元素
LineTo 子元素描述了一条从路径当前位置到由 x 和 y 属性指定位置的直线。
x
float default: 0.0
直线的目标 x 位置。
y
float default: 0.0
直线的目标 y 位置。
Path 的 ArcTo 子元素
ArcTo 子元素描述了椭圆的一段圆弧。圆弧从路径 当前位置绘制到由 x 和 y 属性指定的位置。其余属性 参照 SVG 规范建模，允许调节方向 或角度等视觉特性。
large-arc
bool default: false
在闭合椭圆的两段弧中，此标志选择渲染较大的那一段弧。如果该属性为 false，则改为渲染较短的弧。
radius-x
float default: 0.0
椭圆的 x 半径。
radius-y
float default: 0.0
椭圆的 y 半径。
sweep
bool default: false
如果该属性为 true，则圆弧将按顺时针方向绘制；否则按逆时针方向。
x-rotation
float default: 0.0
椭圆的 x 轴将按该属性的值旋转，以角度为单位，取值范围为 0 到 360 度。
x
float default: 0.0
直线的目标 x 位置。
y
float default: 0.0
直线的目标 y 位置。
Path 的 CubicTo 子元素
CubicTo 子元素描述了一条从路径当前位置到 由 x 和 y 属性指定位置的光滑贝塞尔曲线，使用由其 各自属性指定的两个控制点。
control-1-x
float default: 0.0
曲线第一个控制点的 x 坐标。
control-1-y
float default: 0.0
曲线第一个控制点的 y 坐标。
control-2-x
float default: 0.0
曲线第二个控制点的 x 坐标。
control-2-y
float default: 0.0
曲线第二个控制点的 y 坐标。
x
float default: 0.0
曲线的目标 x 位置。
y
float default: 0.0
曲线的目标 y 位置。
Path 的 QuadraticTo 子元素
QuadraticTo 子元素描述了一条从路径当前位置到 由 x 和 y 属性指定位置的光滑贝塞尔曲线，使用由 control-x 和 control-y 属性指定的控制点。
control-x
float default: 0.0
曲线控制点的 x 坐标。
control-y
float default: 0.0
曲线控制点的 y 坐标。
x
float default: 0.0
曲线的目标 x 位置。
y
float default: 0.0
曲线的目标 y 位置。
Path 的 Close 子元素
Close 元素会关闭当前子路径，并从当前位置 到路径起点绘制一条直线。