Qt6 QML Book/图形/基本形状

最新推荐文章于 2025-11-13 07:19:28 发布

翻译最新推荐文章于 2025-11-13 07:19:28 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.qt.io/product/qt6/qml-book/ch09-shapes-basics

文章标签：

#qt

Qt6 QML Book 专栏收录该内容

137 篇文章

订阅专栏

介绍如何使用Qt Quick Shapes模块创建复杂的路径并进行填充与描边，通过一个具体实例展示如何组合多种路径元素来绘制一个完整的图形。

A Basic Shape

基本形状

The shape module lets you create arbitrarily paths and then stroke the outline and fill the interior. The definition of the path can be reused in other places where paths are used, e.g. for the PathView element used with models. But to paint a path, the Shape element is used, and the various path elements are put into a ShapePath.

“形状”模块允许您创建任意路径，然后绘制轮廓并填充内部。路径的定义可以在使用的地方重用，例如用于模型的PathView元素。但要绘制路径，需要使用Shape元素，并将各种路径元素放入ShapePath中。

In the example below, the path shown in the screenshot here is created. The entire figure, all five filled areas, are created from a single path which then is stroked and filled.

在下面的示例中，创建了屏幕截图中显示的路径。整个图形，所有五个填充区域，都是从一条路径创建的，然后对其进行笔划和填充。

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 }            
        }
    }
}

The path is made up of the children to the ShapePath, i.e. the PathArc, PathLine, and PathMove elements in the example above. In the next section, we will have a close look at the building blocks of paths.

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