# 构建路径

正如上章看到的那样，形状从路径构建，路径由路径元素构建。最常见构建路径的方式是闭合它，也就是确保起点和终点是同一个点。然而，有可能创建开放路径，例如只是为了绘制线条。当填充开放曲线的时，路径被一条直线闭合，基本上就是在要填充路径的时候添加一个PathLine用于闭合路径，但是绘制线条时并不绘制这条闭合线。

如下面的屏幕截图所示，存在一些基本形状可用于构建路径，它们是：直线、圆弧和各种曲线。也可以使用PathMove元素在不绘制的情况下移动当前位置。除了这些元素之外，ShapePath元素还允许使用startX和startY属性指定一个起点。

如下所示，使用PathLine元素绘制线条。要创建多条独立线条，可以使用PathMultiline。

Shape {
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        
        startX: 20; startY: 70

        PathLine {
            x: 180
            y: 130
        }
    }
}

创建多段线时，也就是由多条线段组成的线，可以使用PathPolyline元素。这可以节省一些输入，因为上一条线的终点被假定为下一条线的起点。

Shape {
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        
        PathPolyline {
            path: [
                Qt.point(220, 100),
                Qt.point(260, 20),
                Qt.point(300, 170),
                Qt.point(340, 60),
                Qt.point(380, 100)
            ]
        }
    }
}

对于创建圆弧，即圆或椭圆的线段，使用PathArc和PathAngleArc元素。它们提供了创建弧的工具，当知道起点和终点的坐标时，可以使用PathArc；而当想要控制弧扫过的度数时，PathAngleArc很有用。这两个元素产生相同的输出，因此在应用程序中使用哪一个种取决于弧的哪方面最重要。

Shape {
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        
        startX: 420; startY: 100

        PathArc {
            x: 580; y: 180
            radiusX: 120; radiusY: 120
        }
    }
}

了解完直线和圆弧之后是各种曲线了。在这里，Qt Quick Shapes 提供了三种风格。首先看看PathQuad，它根据起点（起点是隐式的）、终点和单个控制点创建二次贝塞尔曲线。

Shape {
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        
        startX: 20; startY: 300

        PathQuad {
            x: 180; y: 300
            controlX: 60; controlY: 250
        }
    }
}

PathCubic元素使用起点（起点是隐式的）、终点和两个控制点创建一条三次贝塞尔曲线。

Shape {
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        
        startX: 220; startY: 300

        PathCubic {
            x: 380; y: 300
            control1X: 260; control1Y: 250
            control2X: 360; control2Y: 350
        }
    }
}

最后，PathCurve创建了一条通过控制点列表的曲线。曲线是通过多个PathCurve元素创建，每个元素包含一个控制点。 Catmull-Rom样条用于创建通过控制点的曲线。

Shape {
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        
        startX: 420; startY: 300

        PathCurve { x: 460; y: 220 }
        PathCurve { x: 500; y: 370 }
        PathCurve { x: 540; y: 270 }
        PathCurve { x: 580; y: 300 }
    }
}

还有一个更有用的路径元素，PathSvg。此元素可描边和填充SVG路径。

提示

PathSvg元素并不总是能与其他路径元素相组合的。这取决于所使用的绘制后端，因此请确保对单个路径里只使用PathSvg元素或其他元素，不能混用。如果将PathSvg与其他路径元素混合使用，得到的结果有所不同。

← 基本形状填充形状 →