基本形状

shape(形状)模块允许创建任意路径，然后绘制轮廓并填充内部。这里路径的定义与前面其他地方定义的相同，如用于模型的PathView元素中的定义。但要绘制路径，需要使用Shape元素，并将各种路径元素放入ShapePath中。

在下面的示例中，创建了截图中显示的路径。整个图形（所有五个填充区域）都是由一条路径创建的，然后对该路径进行轮廓绘制与填充。

import QtQuick
import QtQuick.Shapes

Rectangle {
    id: root
    width: 600
    height: 600

    Shape {
        anchors.centerIn: parent
        
        ShapePath {
        
            strokeWidth: 3
            strokeColor: "darkGray"
            fillColor: "lightGray"

            startX: -40; startY: 200
            
            // The circle
            
            PathArc { x: 40; y: 200; radiusX: 200; radiusY: 200; useLargeArc: true }
            PathLine { x: 40; y: 120 }
            PathArc { x: -40; y: 120; radiusX: 120; radiusY: 120; useLargeArc: true; direction: PathArc.Counterclockwise }
            PathLine { x: -40; y: 200 }

            // The dots
            
            PathMove { x: -20; y: 80 }
            PathArc { x: 20; y: 80; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 80; radiusX: 20; radiusY: 20; useLargeArc: true }

            PathMove { x: -20; y: 130 }
            PathArc { x: 20; y: 130; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 130; radiusX: 20; radiusY: 20; useLargeArc: true }

            PathMove { x: -20; y: 180 }
            PathArc { x: 20; y: 180; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 180; radiusX: 20; radiusY: 20; useLargeArc: true }

            PathMove { x: -20; y: 230 }
            PathArc { x: 20; y: 230; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 230; radiusX: 20; radiusY: 20; useLargeArc: true }            
        }
    }
}

路径由ShapePath的子元素组成，即上面示例中的PathArc、PathLine和PathMove元素。 在下一节中，我们将仔细研究路径的构建块。