Qt 中的二维图形

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

这是一个高级概述，重点是渲染图形基元（如圆形、矩形、复杂形状和图像）的直接方法。有关 Qt 图形内部的底层视图，请参阅图形概述文档。

Qt 还包含高端3D 渲染功能，有自己的 API 和工具集。以下概述的重点是二维图形，因此 Qt Quick 3D及相关组件将不在此介绍。

Qt Quick

Qt QuickQt.NET拥有用于渲染硬件加速和动画二维图形的工具。它是.NET Framework 中丰富的用户界面组件的基础。 Qt Quick Controls.

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

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

Qt Quick 图形

除基本原型外，Qt Quick 还有用于渲染更复杂图形的 API。通过在代码中导入 Qt Quick Shapes模块。

Qt Quick 形状 "允许您通过路径操作构建任意的paths ，如move-to 、line-to 、cubic-to 和arc-to 。

每条路径都可以通过丰富的选项定义笔划。此外，它还可以填充纯色、渐变色、图像，甚至其他Qt Quick 项目。

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 组件的补充。它可用于高级效果，例如渐变填充和路径操作，如从另一个形状中减去文本。

光栅图像

光栅图像（或像素图）可通过图像组件在Qt Quick 中显示。Qt GUI 模块默认支持一系列图像格式（PNG、JPEG、BMP 和 GIF）。此外，该 Qt Image Formats模块还提供加载其他图像格式的插件。只要您的应用程序能访问特定格式的插件，就能使用图像组件加载该格式。

矢量图像

光栅图像的一个限制是，如果不降低图像质量，就无法对其进行缩放或其他转换。对于需要以不同尺寸显示或转换的图像，通常最好使用矢量图像格式。

VectorImage 组件可用于在Qt Quick 应用程序中直接包含可缩放的矢量图形。该组件目前默认支持 SVG 格式。通过在应用程序中部署插件，还可使其支持 Lottie 格式。请注意，这种支持目前还处于试验阶段。

VectorImage 会解析文档并在内存中创建一个Qt Quick 场景，使用Qt Quick Shapes 和其他基元来表示文档内容。因此，其行为与使用Qt Quick 编写的矢量图像相同。

矢量图像也可使用svgtoqml和lottietoqml工具提前转换为 QML。这样就能使用Qt Quick 组件创建相同的矢量图像表示法。不过，它不是在内存中创建，而是保存到文件中。预生成 QML 文件意味着它可以作为应用程序资产的一部分进行预编译，这将在加载时节省一些时间。

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

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

预栅格化矢量图像

对于只能以单一尺寸显示的矢量图像，提前将其光栅化为像素图并使用图像显示会更有效。通常，此类图像会以 SVGs 的形式存储在应用程序源资产中，然后按照预定义的尺寸转换为 PNGs（例如）。这通常是应用程序构建和打包过程的一部分。

渲染图像比渲染复杂形状更快，因此对于静态图像来说，这是最佳方法。不过，对于某些应用程序来说，在构建时进行这种转换并不方便。例如，如果应用程序的目标是许多不同的外形尺寸，那么涵盖所有外形尺寸的预定义尺寸列表可能会很长，而且很难预测。由于每个预渲染图像都会在应用程序部署中消耗额外的空间，因此这种方法也需要付出一定的代价。

因此，Qt 还支持在加载图像时以特定大小光栅化 SVG 文件。只需通过常规的图像组件加载文件即可。sourceSize 属性可用于控制图像的光栅化大小。

通过Image加载 SVG 与通过VectorImage 加载 SVG 有以下不同：

• 通过Image，图像在作为纹理加载之前要在 CPU 上进行光栅化处理。因此会产生额外的加载成本，这取决于光栅化图像的目标大小。不过，同一图像的后续渲染速度将与预先光栅化并作为像素图加载的图像一样快。
• 此外，光栅化图像可能会消耗更多内存，这取决于矢量图像的复杂程度和光栅化数据的大小。
• 缩放/转换图像的缺点与以像素图加载图像的缺点相同。
• 如果图像有动画，那么Image将只显示第一帧。

因此，一般来说，如果图像没有动画，并且在应用程序的整个生命周期内大小保持不变，那么使用预先栅格化的矢量图像会更好。至于图像是在构建时由第三方工具栅格化，还是在 Qt 加载图像时在运行时栅格化，这需要在加载时间和方便性/部署大小之间权衡。

矢量图像示例显示了使用图像、VectorImage 和使用svgtoqml 生成的 QML 文件以不同比例显示的 SVG 文件。以源尺寸显示时，整个渲染看起来都一样，图像的渲染速度会稍快一些。在较高的比例下，图像会变得模糊和像素化，而其他方法则会保持清晰和与源文件一致。

动画矢量图形

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

VectorImage目前，svgtoqml和lottietoqml支持选定属性子集的动画。

lottietoqml 示例展示了如何将 Lottie 动画文件转换为 QML。从截图中可以看到，多个动画图片以网格形式排列。每个图像都可以缩放，而不会出现缩放假象或丢失保真度。

特效

Qt Quick 的核心功能之一是支持后期特效处理。任何项目都可以变成纹理，ShaderEffect 组件可用于对其应用任何效果。

除了对特效的低级支持外，Qt Quick 还包含一些高级组件，使处理过程更加简便。

MultiEffect 组件允许将一个或多个预定义的常用特效应用到一个项目中。

对于更复杂的用例， Qt Quick Effect Maker提供了一个可视化工具，您可以将预定义和自定义特效串联起来，并生成 Shader 代码，与ShaderEffect 一起使用。

QPainter

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

可使用QPainterPath 指定形状，渲染器还直接支持文本和图像等基元。

QPainter主要是一种软件渲染器，它针对较小的屏幕局部更新进行了优化。因此，它非常适合传统的桌面风格界面，如 Qt Widgets在这种界面中，用户界面的大部分内容在每一帧之间都是静态的。因此，用它来渲染大型复杂的二维场景可能会比较昂贵，值得考虑用 Qt Quick Shapes来代替。

另一方面，SVG 的渲染质量较高，因此在许多使用案例中，SVG 仍然是首选。如前所述，通过Image渲染 SVG 图像时，QPainter将是底层渲染器。

如果像素完美是目标，并且更新很少和/或仅限于小区域，那么QPainter 就是一个强大的工具。如果它成为性能瓶颈，您可以考虑改用 Qt Quick和 Qt Quick Shapes来代替。

高级组件

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

Qt Quick Controls就是这样一个模块。它提供了一套丰富的、可风格化的通用用户界面组件。类似地 Qt Widgets为基于 QPainter 的应用程序提供了同样的组件。

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