天气预报示例

本示例设计成欧洲天气预报应用的样式。它展示了QtQuick.Shapes API在应用程序中可能发挥作用的几种不同方式，以及不同的属性如何影响渲染的质量和性能。

示例中的所有图形均源自.svg 文件，这些文件在构建时会通过svgtoqml工具自动转换为QML。

qt_target_qml_from_svg(weatherforecastexample
    OPTIMIZE_PATHS
    ASYNCHRONOUS_SHAPES
    TYPE_NAME "DemoShape"
    COPYRIGHT_STATEMENT "Copyright © 2023 Framework7\\nSPDX-License-Identifier: MIT"
    FILES
        assets/gear-alt-stroke.svg
    OUTPUTS
        Gear_generated.qml
)

生成的 QML 文件可像其他 QML 文件一样在应用程序代码中使用。

不同类型的图形

QtQuick.Shapes 模块提供了在Qt Quick 应用程序中渲染矢量图形的 API。这是 2D 图形中使用光栅Image 的替代方案，当图像的目标尺寸无法预先确定时，这种方法非常有用。 使用Image 时，栅格化像素图会在特定尺寸下预先创建，而对图像进行缩放会增加或减少信息。这将导致图像出现锯齿或模糊，具体取决于其smooth 属性是否已设置。

使用QtQuick.Shapes 时，形状通过一组曲线和线段进行数学描述，因此可以任意缩放而不会产生伪影。

在“天气预报”示例中，形状主要有三种用途：

• 用户界面图标，例如天气符号和“设置”按钮上的齿轮图标。
• 欧洲概览地图。
• 放大地图时显示的国家名称标签。

用户界面图标

虽然出于性能考虑，通常建议为图标使用尺寸合适的位图图像，但如果同一应用程序面向多种不同的屏幕尺寸，这可能会带来不便。 为了使图标在所有屏幕上都显示清晰，您必须预先生成一大套不同尺寸的图标。QtQuick.Shapes 允许应用程序在运行时进行这种适应性调整，方法是将图标作为形状包含在内，并根据当前屏幕尺寸以适当的大小进行渲染。

在桌面系统上运行“天气预报”示例时，通过调整应用程序窗口的大小即可观察到这一效果。天气图标会根据窗口大小进行自适应调整，且不会降低画质。

此外，还可以添加缩放等动画效果，且不会造成画质损失。将鼠标悬停在天气符号上即可观察到这一效果。

因此，对于任何目标尺寸未知，或者可能的尺寸数量如此之多以至于为所有情况创建特定的位图都不可行的用例，使用形状作为图标都是有用的，并且值得付出运行时对形状进行光栅化的性能开销。

欧洲地图

“天气预报”示例还使用了一张矢量化处理的欧洲地图。这使得在需要突出显示特定国家时，可以轻松实现放大地图等效果。此外，由于每个国家都是一个独立的子形状，我们可以独立地为它们应用不同的填充色和描边。

点击地图可放大某个国家。此时比例尺将自动调整，使该国形状填满窗口，且填充颜色会略微加深。

国家名称标签

当放大某个国家时，其名称会显示在该国轮廓上。该标签同样由QtQuick.Shapes 生成，通过使用PathText 组件类型将字符串转换为可渲染的形状。

这并非在Qt Quick 中创建文本标签的常规方式。对于大多数用途而言，使用Text 元素是最高效且便捷的方法。然而，QtQuick.Shapes 支持某些常规Text 元素所不支持的可视化效果，填充渐变便是其中之一。

                        ShapePath {
                            strokeColor:  "transparent"
                            strokeWidth: 1
                            joinStyle: ShapePath.RoundJoin
                            fillRule: ShapePath.WindingFill

                            fillGradient: RadialGradient {
                                centerX: textShape.width / 2
                                centerY: textShape.height / 2
                                centerRadius: textShape.width / 2
                                focalX: centerX; focalY: centerY
                                GradientStop { position: 0; color: "#b0ab9d7f" }
                                GradientStop { position: 1; color: "#5cab9d7f" }
                            }
                            PathText {
                                id: textPath
                                text: textLayer.label
                                font.family: workSansRegular.font.family
                                font.pixelSize: 64
                            }
                        }

为说明这一点，“天气预报”示例在国家标签的不透明度上应用了微妙的径向渐变，使其边缘看起来仿佛与地图融为一体。

不同类型的渲染器

“天气预报”示例展示了QtQuick.Shapes 的多种不同用例。此外，它还可以用来了解该模块所支持的不同渲染器的优缺点。

点击左上角的齿轮图标可打开设置面板，在其中可选择不同的光栅化方案。

QtQuick.Shapes 支持两种不同的渲染器，可通过preferredRendererType 属性进行选择。示例中推荐的渲染器是CurveRenderer 。它支持硬件加速曲线和内置抗锯齿功能。虽然它并非QtQuick.Shapes 中的默认渲染器，但在本示例中，它会在启动时被自动选中。

Qt Quick Shapes 中的默认渲染器是GeometryRenderer 。该渲染器会将形状的曲线简化为非常短的直线，并以多边形的形式绘制该形状。与CurveRenderer 相比，重绘该形状的效率更高，但在某些比例下，曲线被近似为直线这一事实会变得明显。

此外，GeometryRenderer 不支持抗锯齿，因此在使用时通常需要启用多采样。这可以通过将形状渲染到图层中，并在这些图层上启用多采样来实现。 由于在此模式下我们将图形渲染到离屏缓冲区中，因此会消耗额外的图形内存，并且每个图形都需要额外的渲染步骤。

        layer.enabled: msaaCheckBox.checked
        layer.samples: 4

设置面板还提供了一项选项，可将GeometryRenderer 与4倍多采样结合使用，以便将其质量与CurveRenderer 的内置抗锯齿功能进行比较。

运行示例

您可以通过以下方式运行示例：

• Qt Creator

  打开Welcome 模式，并从Examples 中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。

• Qt Extension for Visual Studio Code

  在Command Palette 中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。

示例项目 @ code.qt.io