Qt6 QML Book/图形/构建路径

Building Paths

构建路径

As we saw in the last section, shapes are built from paths, which are built from path elements. The most common way to build a path is to close it, i.e. to ensure that it starts and ends in the same point. However, it is possible to create open paths, e.g. only for stroking. When filling an open path, the path is closed by a straight line, basically adding a PathLine that is used when filling the path, but not when stroking it.

正如我们在上一节中看到的，形状是从路径构建的，路径是从路径元素构建的。构建路径最常见的方法是关闭路径，即确保路径在同一点开始和结束。但是，也可以创建开放路径，例如仅用于显示路径。填充开放路径时，路径由一条直线闭合，基本上添加了填充路径时使用的路径线，但在只显示路径时不使用。

As shown in the screenshot below, there are a few basic shapes that can be used to build your path. These are: lines, arcs, and various curves. It is also possible to move without drawing using a PathMove element. In addition to these elements, the ShapePath element also lets you specify a starting point using the startX and startY properties.

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

Lines are drawn using the PathLine element, as shown below. For creating multiple independent lines, the PathMultiline can be used.

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

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

        PathLine {
            x: 180
            y: 130
        }
    }
}

When creating a polyline, i.e. a line consisting of several line segments, the PathPolyline element can be used. This saves some typing, as the end point of the last line is assumed to be the starting point of the next line.

创建多段线（即由多条线段组成的直线）时，可以使用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)
            ]
        }
    }
}

For creating arcs, i.e. segments of circles or ellipses, the PathArc and PathAngleArc elements are used. They provide you with the tools to create arcs, where the PathArc is used when you know the coordinates of the starting and ending points, while the PathAngleArc is useful when you want to control how many degrees the arc sweeps. Both elements produce the same output, so which one you use comes down to what aspects of the arc are the most important in your application.

对于创建圆弧，即圆或椭圆的线段，使用PathArc和PathAngleArc元素。它们为您提供了创建圆弧的工具，当您知道起点和终点的坐标时，将使用PathArc，而当您想要控制圆弧扫掠的角度时，PathAngleArc非常有用。这两个元素产生相同的输出，所以使用哪一个取决于应用程序中弧的哪些方面最重要。

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

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

After the lines and arcs follows the various curves. Here, Qt Quick Shapes provides three flavours. First, we have a look a the PathQuad which let's you create a quadratic Bezier curve based on the starting and end points (the starting point is implicit) and a single control point.

之后，直线和圆弧跟随各种曲线。在这里，Qt Quick Shapes提供了三种类型。首先，我们看一看PathQuad，它让你基于起点和终点（起点是隐式的）和单个控制点创建一条二次贝塞尔曲线。

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

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

The PathCubic element creates a cubic Bezier curve from the starting and end points (the starting point is implicit) and two control points.

PathCubic元素从起点和终点（起点是隐式的）以及两个控制点创建一条三次Bezier曲线。

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

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

Finally, the PathCurve creates a curve passing through a list of provided control points. The curve is created by providing multiple PathCurve elements which each contain one control point. The Catmull-Rom spline is used to create a curve passing through the control points.

最后，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 }
    }
}

There is one more useful path element, the PathSvg. This element lets you stroke and fill an SVG path.

还有一个更有用的路径元素PathSvg。该元素允许您绘制和填充SVG路径。

TIP

注

The PathSvg element cannot always be combined with other path elements. This depends on the painting backend used, so make sure to use the PathSvg element or the other elements for a single path. If you mix PathSvg with other path elements, your milage will vary.

PathSvg元素不能一直与其他路径元素组合。这取决于所使用的绘制后端，因此请确保对单个路径使用PathSvg元素或其他元素。如果您将PathSvg与其他路径元素混合，您的相似性将有所不同。