Qt 中的 2D 图形

二维图形是 Qt 用户界面功能的核心。本页概述了可用于渲染自定义二维图形的工具和 API，同时旨在阐明执行类似任务的 API 之间的区别。

本文为高层次概述，重点介绍渲染图形基元（如圆形、矩形、复杂形状和图像）的直接方法。如需了解 Qt 图形内部机制的低层次视图，请参阅图形概述文档。

Qt 还包含高端3D 渲染功能，并配有专用的 API 和工具集。以下概述将侧重于二维图形，因此 Qt Quick 3D 因此此处将不涉及相关组件。

Qt Quick

Qt Quick 提供了渲染硬件加速和动画 2D 图形的工具。它构成了 Qt Quick Controls。

Qt Quick 模块提供了诸如rectangles 、text 和图像等基本图形元素。这些通常是二维用户界面的基础。

Qt Quick 中的用户界面可在较低的性能开销下进行变换和动画处理，这一优势正是该模块的核心所在。其 API 采用声明式设计，这使得 Qt 能够优化图形的存储、渲染以及动画更新的管理方式。

Qt Quick 形状

除了基本图形元素外，Qt Quick 还提供了用于渲染更复杂图形的 API。您可以在代码中通过导入 Qt Quick Shapes 模块即可使用。

Qt Quick Shapes 允许您通过路径操作（如move-to 、line-to 、cubic-to 和arc-to ）构建任意的paths 对象。

每条路径都可以通过丰富的选项集定义其描边。此外，路径内部可以填充纯色、渐变色、图像，甚至另一个Qt Quick 对象。

Qt Quick Shapes 路径渲染的 GhostScript tiger" src="images/tiger.png" title="使用 Qt Quick Shapes 路径渲染的 GhostScript tiger"/>

“Qt Quick Shapes”示例展示了如何利用Qt Quick Shapes构建的路径来渲染经典的GhostScript老虎图案。

曲线渲染器

默认情况下，Qt Quick Shapes 依赖多采样来实现抗锯齿。此外，曲线会被简化为短线段，若放大形状，这一现象便会显现。 通过将Shape 项的preferredRendererType 属性设置为Shape.CurveRenderer ，系统将在内部使用另一种渲染器。该曲线渲染器在GPU上直接求解曲线，并应用不依赖MSAA的抗锯齿处理。

首次渲染该形状时，性能会略有下降。但此后，该形状即可在不产生额外性能开销的情况下平滑地进行缩放和变换。

其他操作

除了用于构建路径的基本操作外，Qt Quick Shapes 还包含一些功能强大的便捷组件。

• PathQuad 组件可用于向路径中添加二次曲线。
• PathRectangle 组件可用于构造矩形，并可选地设置圆角。
• PathSvg 组件可用于使用 SVG 的路径语法构建路径。（注意：该组件仅提供了一种描述路径的紧凑方式，并不支持完整的 SVG 语法。）
• PathText 组件可用于将字体的轮廓添加到路径中。这是对Qt Quick 中Text 组件的补充。它可用于实现高级效果，例如渐变填充以及路径运算（如从另一个形状中减去文本）。

光栅图像

可以通过“Image”组件在Qt Quick 中显示位图图像（或称像素图）。默认情况下，通过 Qt GUI 模块默认支持多种图像格式（PNG、JPEG、BMP 和 GIF）。此外， Qt Image Formats 模块还提供用于加载其他图像格式的插件。只要您的应用程序能够访问特定格式的插件，即可通过“图像”组件加载该格式。

矢量图像

栅格图像的一个局限性在于，对其进行缩放或其他变换时，难免会导致画质下降。对于需要以不同尺寸显示或进行变换的图像，通常建议改用矢量图像格式。

VectorImage 组件可用于将可缩放矢量图形直接嵌入到您的Qt Quick 应用程序中。它目前默认支持SVG格式。通过随应用程序部署一个插件，还可以使其支持Lottie格式。

VectorImage 会解析文档，并利用Qt Quick 的形状及其他基元在内存中创建一个代表其内容的Qt Quick 场景。因此，其行为与使用Qt Quick 绘制矢量图像时完全相同。

此外，还可以使用svgtoqml和lottietoqml工具将矢量图像预先转换为 QML。这会使用Qt Quick 组件生成矢量图像的等效表示。不过，该表示不会在内存中创建，而是保存到文件中。 预先生成 QML 文件意味着可以将其作为应用程序资源的一部分进行预编译，从而在加载时节省一些时间。

“天气预报示例”展示了如何在应用程序中使用svgtoqml。天气符号、地图和图标均为已转换为 QML 的 SVG 文件，并作为项目加载到应用程序场景中。

同样，lottietoqml工具可用于将 Lottie 动画转换为 QML。

预渲染的矢量图像

对于仅以单一尺寸显示的矢量图像，将其预先栅格化为像素图，然后使用Image 显示会更高效。 通常，此类图像会以 SVG 格式存储在应用程序源资源中，随后按预定义尺寸转换为 PNG（例如）。这通常作为应用程序构建和打包过程的一部分进行。

渲染图像比渲染复杂形状更快，因此对于静态图像而言，这是最佳方案。然而，对于某些应用程序，在构建时进行这种转换并不方便。例如，如果应用程序面向多种不同的设备形态，则覆盖所有这些形态的预定义尺寸列表可能会非常长且难以预测。 由于每张预渲染的图像都会在应用程序部署中占用额外空间，因此这种方法也会带来一定的成本。

因此，Qt SVG 还支持在加载图像时将 SVG 文件栅格化为特定尺寸。只需通过常规的Image组件加载文件即可实现。可通过sourceSize 属性控制图像的栅格化尺寸。

通过Image加载 SVG 与通过VectorImage 加载在以下方面有所不同：

• 使用Image 组件时，图像会在作为纹理加载之前先在 CPU 上进行栅格化。因此会产生额外的加载开销，具体取决于栅格化图像的目标尺寸。不过，后续渲染同一图像的速度将与预先栅格化并作为位图加载的情况一样快。
• 此外，根据矢量图像的复杂程度和栅格化数据的大小，栅格化后的图像可能会消耗更多的内存。
• 对图像进行缩放/变换时，其缺点与直接加载为位图时相同。
• 如果图像包含动画，则Image只会显示第一帧。

因此，一般而言，当图像没有动画且其大小在应用程序的整个生命周期内保持不变时，使用预栅格化的矢量图像会更好。 无论图像是在构建时由第三方工具栅格化，还是在运行时由 Qt 加载时栅格化，这都是在加载时间与便利性/部署大小之间的一种权衡。

“矢量图像示例”展示了使用Image、VectorImage 以及通过svgtoqml 生成的 QML 文件，以不同比例显示 SVG 文件的情况。当以源尺寸显示时，渲染效果完全一致，而Image的渲染速度会略快一些。 在较高缩放比例下，`Image` 会变得模糊且出现锯齿，而其他方法则能保持清晰并忠实于源文件。

矢量图形动画

动画是Qt Quick 的核心功能。许多矢量图形动画可以在不改变项目几何形状的情况下运行，因此能充分利用Qt Quick 的硬件加速渲染器。

VectorImagesvgtoqml和lottietoqml支持特定属性子集的动画效果。

lottietoqml 示例展示了如何将带动画的 Lottie 文件转换为 QML。如截图所示，多个带动画的图像以网格形式排列。每个图像均可进行缩放，且不会产生缩放伪影或损失保真度。

特效

后处理效果的支持是Qt Quick 的核心功能之一。任何项目均可转换为纹理，并可通过ShaderEffect 组件对其应用任意效果。

除了这种低级别的特效支持外，Qt Quick 还提供了一些高级组件，以简化操作流程。

MultiEffect 组件允许对物品应用一组预定义的常用特效中的一个或多个。

Qt Quick Effect Maker 是一款用于串联和制作特效的可视化工具" src="images/quickeffectmaker.png" title="Qt Quick Effect Maker 是一款用于串联和制作特效的可视化工具"/>

对于更复杂的使用场景， Qt Quick Effect Maker 提供了一个可视化工具，您可以在其中将预定义和自定义效果串联起来，并生成可用于ShaderEffect 的着色器代码。

QPainter

QPainter是 Qt Widgets的基础。它提供了一个命令式 API，用于绘制具有像素级精确抗锯齿效果的复杂形状和图像。

形状可通过QPainterPath 进行指定，渲染器还直接支持文本和图像等基本图形元素。

QPainter主要是一个软件渲染器，针对屏幕的小范围、局部更新进行了优化。因此，它非常适合 Qt Widgets，其中大部分用户界面在相邻帧之间是静态的。因此，使用它渲染大型且复杂的 2D 场景可能开销较大，此时不妨考虑 Qt Quick Shapes 。

另一方面，其渲染质量更高，因此在许多使用场景中它仍然是更优的选择。如前所述，当通过Image渲染 SVG 图像时，QPainter将作为底层渲染器。

如果目标是像素级精确，且更新频率较低和/或仅限于小范围区域，那么QPainter 是一个强大的工具。如果它成为性能瓶颈，您可以考虑改用 Qt Quick 和 Qt Quick Shapes 。

更高层次的组件

在这些基本图形基元的基础上，Qt 还提供了许多专门的高级组件。

Qt Quick Controls 便是其中一个模块。它提供了一套丰富且可自定义样式的常用用户界面组件。同样地， Qt Widgets 也为基于 QPainter 的应用程序提供了相同的功能。

此外， Qt Graphs 是一个数据可视化模块。它提供了许多不同的组件，用于在 Qt Quick 应用程序中可视化数据集和图表。 Qt Graphs 同时支持 2D 和 3D 图表。