【五一创作】QML、Qt Quick /Qt中绘制圆形

Qt Quick中绘制圆形

有多种方法可以在 Qt Quick 中绘制圆形。以下是一些主要方法：

1. 使用 Canvas 元素

2. 使用 Shapes 模块：

   a. 使用 PathArc 和 PathLine 元素组合绘制一个完整的圆形。

   b. 使用 PathEllipse 元素绘制一个椭圆形，并将其设置为圆形。

3. 使用 Rectangle 元素绘制圆角矩形并将圆角半径设置为宽度和高度的一半。

下面是这些方法的示例：

1. 使用 Canvas 元素：

   Canvas {id: canvasanchors.fill: parentonPaint: {var ctx = getContext('2d');ctx.reset();// 绘制圆形ctx.beginPath();ctx.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);ctx.fillStyle = 'lightblue';ctx.fill();ctx.strokeStyle = 'black';ctx.stroke();ctx.closePath();}
   }
   

2. 使用 Shapes 模块：
   1. 使用 PathArc 和 PathLine 元素组合绘制一个完整的圆形。

      import QtQuick 2.15
      import QtQuick.Shapes 1.15Shape {anchors.fill: parentShapePath {strokeWidth: 2fillColor: "lightblue"strokeColor: "black"Path {startX: width / 2startY: height / 2PathLine {x: widthy: height / 2}PathArc {x: width / 2y: height / 2radiusX: width / 2radiusY: height / 2useLargeArc: true}PathLine {x: width / 2y: height / 2}}}
      }

   2. 使用 PathEllipse 元素绘制一个椭圆形，并将其设置为圆形。

      import QtQuick 2.15
      import QtQuick.Shapes 1.15Shape {anchors.fill: parentShapePath {strokeWidth: 2fillColor: "lightblue"strokeColor: "black"Path {startX: width / 2startY: height / 2PathEllipse {x: 0y: 0width: parent.widthheight: parent.height}}}
      }
      

   3. 使用 Rectangle 元素绘制圆角矩形并将圆角半径设置为宽度和高度的一半。

      Rectangle {anchors.fill: parentcolor: "lightblue"border.color: "black"border.width: 2radius: Math.min(width, height) / 2
      }
      

以上是在 Qt Quick 中绘制圆形的主要方法。请注意，有些方法可能更适合特定情况，例如，当您需要使用不同方法时，可以根据应用程序的具体需求和场景选择合适的绘制方法。这里给出一些建议：

1. 如果您需要动态更新或使用动画的图形，Canvas 是一个不错的选择。它提供了丰富的绘图和动画功能，可以轻松实现自定义的交互和动画效果。
2. 如果您需要在 QML 代码中声明式地创建图形，并且需要与其他 Qt Quick 组件紧密集成，那么 Shapes 模块可能是一个更好的选择。Shapes 可以很好地利用硬件加速，还可以轻松地与其他 Qt Quick 类型一起使用。
3. 对于简单的静态圆形，使用 Rectangle 元素创建圆角矩形可能是最简单的方法。这种方法适用于简单的应用场景，例如绘制圆形按钮或图标。但请注意，Rectangle 的圆角半径受限于它的尺寸，因此在某些情况下可能无法绘制完美的圆形。

在实际项目中，您可能需要根据性能、可维护性和代码简洁性等因素权衡这些方法。例如，如果性能是关键因素，那么使用 Shapes 模块可能是一个好选择，因为它利用了硬件加速。如果代码可读性和简洁性是关键，那么使用 Rectangle 或者 Shapes 模块可能更合适。

扩展知识

Canvas 模块介绍

Canvas 是 Qt Quick 的一个元素，提供了一种通过 JavaScript 和 2D 绘图 API 在 QML 中绘制图形的方法。Canvas 允许您创建和操作矢量图形、位图图像和文本。它提供了大量的绘图功能，例如路径、颜色、填充、描边、渐变、模式和变换等。Canvas 还支持动画和交互，使其成为创建自定义动画和可视化的理想选择。

以下是一些 Canvas 的主要特性：

1. 灵活性：Canvas 提供了丰富的绘图功能，使您可以创建各种图形，如线条、矩形、圆形、椭圆、多边形等。此外，您还可以使用渐变、模式和阴影等样式来美化您的图形。
2. 动画和交互：Canvas 支持动画和用户交互。您可以使用 requestAnimationFrame() 函数来实现动画，或者通过 MouseArea 和其他输入处理器来响应用户操作。
3. 性能：尽管 Canvas 使用 JavaScript 绘图，但它仍然具有相当高的性能。这是因为 Canvas 使用了 Qt Quick Scene Graph，一个高效的渲染框架。此外，通过在 onPaint 处理程序中只更新需要重绘的区域，您可以进一步提高性能。
4. 与 QML 语法的集成：Canvas 可以与其他 QML 元素一起使用，使您能够在 QML 应用程序中轻松地创建和管理图形。例如，您可以使用 anchors 和 layouts 来定位和调整 Canvas 的大小，或者使用 states 和 transitions 实现复杂的交互和动画。

以下是一个简单的 Canvas 示例，演示了如何绘制一个带有线条和渐变填充的矩形：

import QtQuick 2.15Canvas {id: canvaswidth: 300height: 200onPaint: {var ctx = getContext('2d');ctx.reset();// 创建线性渐变var gradient = ctx.createLinearGradient(0, 0, width, height);gradient.addColorStop(0, 'red');gradient.addColorStop(1, 'blue');// 绘制带有渐变填充的矩形ctx.fillStyle = gradient;ctx.fillRect(50, 50, 200, 100);// 绘制矩形的描边ctx.strokeStyle = 'black';ctx.lineWidth = 2;ctx.strokeRect(50, 50, 200, 100);}
}

在这个示例中，我们首先创建了一个线性渐变，然后使用 fillRect 函数绘制一个带有渐变填充的矩形。接着，我们使用 strokeRect 函数为矩形添加了一个黑色描边。整个绘制过程都是在 onPaint 事件处理程序中完成的。

这个简单的例子展示了如何在 Qt Quick 的 Canvas 元素中使用 2D 绘图 API 来创建自定义图形。除了矩形之外，您还可以使用 Canvas 中的其他函数来绘制圆形、椭圆、多边形、曲线等更复杂的图形。而且，您可以在 Canvas 中创建动画效果，响应用户交互，以及使用图层和组合模式等高级功能。

Canvas 的主要优势在于其灵活性和可定制性。您可以使用 Canvas 创建几乎任何类型的自定义图形，而且可以轻松地将其与其他 Qt Quick 元素和功能集成。不过，如果您需要简单的静态图形，那么使用 Qt Quick 的其他图形元素（如 Rectangle 和 Shapes 模块）可能更为简便和高效。

总之，Canvas 是一个强大的绘图工具，适用于在 QML 中创建复杂的自定义图形、动画和可视化。要充分利用 Canvas 的功能，请参阅 Qt 文档以了解更多关于 2D 绘图 API 的信息。

Shapes 模块介绍

Shapes 模块是 Qt Quick 的一个子模块，用于声明式地在 QML 中创建矢量图形。Shapes 提供了一组灵活的、可组合的元素，使您能够创建各种复杂的图形，如线条、曲线、矩形、圆形、椭圆、多边形等。Shapes 模块利用 Qt Quick Scene Graph 和硬件加速，因此具有很高的性能。

Shapes 模块的主要特点如下：

1. 声明式语法：Shapes 模块允许您使用简洁的 QML 语法创建和管理图形。这使得代码易于编写、阅读和维护。例如，您可以使用嵌套的 QML 元素来定义复杂的图形。
2. 可组合性：Shapes 模块提供了一组基本的图形元素，如 ShapePath、PathLine、PathArc 和 PathCurve 等，您可以将它们组合在一起以创建更复杂的图形。
3. 样式和外观：Shapes 模块支持填充、描边、渐变、模式等各种样式。这使得您可以轻松地创建具有丰富视觉效果的图形。
4. 性能：由于 Shapes 模块利用了 Qt Quick Scene Graph 和硬件加速，因此具有很高的性能。这使得 Shapes 适合用于创建复杂的可视化和动画。
5. 与其他 Qt Quick 元素的集成：Shapes 模块可以与其他 Qt Quick 元素紧密集成，使您能够在应用程序中轻松地创建和管理图形。例如，您可以使用 anchors 和 layouts 来定位和调整形状的大小，或者使用 states 和 transitions 实现复杂的交互和动画。

以下是一个简单的 Shapes 示例，演示了如何创建一个带有描边和填充的圆形：

import QtQuick 2.15
import QtQuick.Shapes 1.15Shape {anchors.fill: parentShapePath {strokeWidth: 2fillColor: "lightblue"strokeColor: "black"startX: width / 2startY: height / 2PathArc {x: width / 2y: height / 2radiusX: width / 2radiusY: height / 2useLargeArc: true}}
}

在这个示例中，我们使用 Shape 元素作为容器，然后在其中添加一个 ShapePath 元素。ShapePath 元素定义了一个路径，该路径使用 PathArc 元素创建了一个圆形。我们还设置了填充颜色、描边颜色和描边宽度以自定义圆形的外观。startX 和 startY 属性确定路径的起点，而 radiusX 和 radiusY 属性确定圆形的半径。useLargeArc 属性设置为 true 以确保绘制完整的圆形。

Shapes 模块不仅可以创建简单的图形，还可以创建复杂的组合图形。例如，您可以通过组合多个 ShapePath 元素以及各种路径命令（如 PathLine、PathArc 和 PathCurve 等）来创建自定义的图形。此外，您还可以利用渐变、模式和阴影等样式来美化图形。

以下是一个使用 Shapes 模块创建的稍复杂的示例，演示了如何绘制一个带有渐变填充和贝塞尔曲线的五角星：

import QtQuick 2.15
import QtQuick.Shapes 1.15Shape {anchors.fill: parentShapePath {fillColor: Qt.linearGradient(0, 0, width, height, "red", "blue")strokeColor: "black"strokeWidth: 2Path.moveTo(width / 2, 0)for (var i = 1; i < 5; ++i) {var angle = i * 2 * Math.PI / 5 - Math.PI / 2;var x = width / 2 + width / 2 * Math.cos(angle);var y = height / 2 + height / 2 * Math.sin(angle);Path.lineTo(x, y);}Path.close();}
}

在这个示例中，我们首先使用 Qt.linearGradient() 函数创建一个从红色到蓝色的线性渐变，然后使用 fillColor 属性将其应用到五角星的填充。接下来，我们使用 Path.moveTo() 函数将路径移动到五角星的第一个顶点，然后使用 for 循环和 Path.lineTo() 函数连接其余顶点。最后，我们使用 Path.close() 函数关闭路径以完成五角星的绘制。

Qt Widgets 中绘制圆形

在 Qt Widgets 应用程序中，您可以使用 QPainter 类在 QWidget 或 QGraphicsScene 上绘制图形，包括圆形。QPainter 提供了丰富的绘图功能，如绘制基本图形、使用渐变和模式、设置描边样式等。

以下是一个在 QWidget 上绘制圆形的简单示例：

1. 首先，创建一个继承自 QWidget 的自定义类。在此示例中，我们将其命名为 CircleWidget。

#include <QWidget>class CircleWidget : public QWidget
{Q_OBJECTpublic:explicit CircleWidget(QWidget *parent = nullptr);protected:void paintEvent(QPaintEvent *event) override;
};

1. 接下来，在实现文件中，包含必要的头文件并实现 CircleWidget 构造函数和 paintEvent 方法。

#include "circlewidget.h"
#include <QPainter>CircleWidget::CircleWidget(QWidget *parent) : QWidget(parent)
{
}void CircleWidget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing, true);// 设置填充颜色和描边颜色painter.setBrush(Qt::lightGray);painter.setPen(Qt::black);// 计算圆形的矩形边界QRectF circleRect(10, 10, width() - 20, height() - 20);// 绘制圆形painter.drawEllipse(circleRect);
}

在 paintEvent 方法中，我们首先创建一个 QPainter 对象并启用抗锯齿。接着，我们使用 setBrush 和 setPen 方法设置填充颜色和描边颜色。然后，我们计算圆形的矩形边界，使其适应当前窗口的大小。最后，我们使用 drawEllipse 方法绘制圆形。

1. 在您的主窗口或其他 QWidget 中使用 CircleWidget。

#include "circlewidget.h"// ...auto circleWidget = new CircleWidget(this);
circleWidget->setGeometry(50, 50, 200, 200);

这个示例演示了如何在 Qt Widgets 应用程序中创建一个简单的自定义 QWidget，该 QWidget 在其 paintEvent 方法中绘制一个圆形。您可以根据需要定制此示例，例如更改圆形的颜色、大小或位置，或添加其他图形和效果。

两种方式的比较

Qt Widgets 和 QML 为在 Qt 应用程序中绘制圆形（或其他图形）提供了不同的方法。每种方法都有其优缺点，根据您的需求和应用程序类型，您可以选择最适合您的方法。

1. Qt Widgets 绘制圆形：

   在 Qt Widgets 应用程序中，您可以使用 QPainter 类在 QWidget 上绘制图形。QPainter 提供了丰富的绘图功能，如绘制基本图形、使用渐变和模式、设置描边样式等。

   优点：

   • 适用于基于 QWidget 的传统桌面应用程序。
   • QPainter 提供了丰富的绘图功能，包括图形、文本、图像等。
   • QPainter 可用于绘制 QWidget 或 QPixmap，因此可以将图形显示在屏幕上或保存为图像文件。
     缺点：
   • 需要编写更多的 C++ 代码，可能导致复杂度和维护难度增加。
   • QPainter 不直接支持硬件加速，因此在某些情况下可能性能较低。
   • 不适用于移动设备或跨平台应用程序，因为 Qt Widgets 主要针对桌面环境。

2. QML 绘制圆形：

   在 QML 应用程序中，您可以使用 Qt Quick Shapes 或 Qt Quick Canvas 模块在 QML 中声明式地创建矢量图形。这些模块利用 Qt Quick Scene Graph 和硬件加速，因此具有很高的性能。

   优点：

   • 适用于跨平台和移动设备上的现代应用程序。
   • 使用简洁的 QML 语法，易于编写、阅读和维护。
   • 可以轻松地创建复杂的可视化和动画，与其他 Qt Quick 元素紧密集成。
   • 具有很高的性能，因为利用了 Qt Quick Scene Graph 和硬件加速。
     缺点：
   • 不适用于基于 QWidget 的传统桌面应用程序。
   • 需要学习和掌握 QML 语法和 Qt Quick 相关概念。

根据您的需求和应用程序类型，您可以选择最适合您的方法。如果您正在开发一个基于 QWidget 的传统桌面应用程序，那么使用 QPainter 在 QWidget 上绘制图形可能更合适。相反，如果您正在开发一个跨平台或移动设备上的现代应用程序，那么使用 QML 和 Qt Quick Shapes 或 Qt Quick Canvas 模块可能更适合。