1 Shape

通过从 QPainterPath 对几何图形进行三角化来渲染路径。

这种方法与通过 QQuickPaintedItem 或 2D 画布渲染形状不同，因为路径不会在软件中进行光栅化。因此 Shape 适用于在屏幕较大区域内创建形状，避免了纹理上传或帧缓冲区传输带来的性能损耗。

此外，声明式 API 允许操作、绑定甚至动画化路径元素的属性，例如起始和结束位置、控制点等。

指定路径元素的类型在 PathView 和 Shape 之间共享。不过，并非所有 Shape 实现都支持所有路径元素类型，同时有些类型对于 PathView 来说可能不合适。Shape 当前支持的子集包括：PathMove、PathLine、PathQuad、PathCubic、PathArc、PathText 和 PathSvg。

有关支持的路径元素的详细概述，请参阅 Path。

2 ShapePath

Shape 包含一个或多个 ShapePath 元素。为了让 Shape 输出任何可见的内容，至少需要一个 ShapePath。

3 Shape属性

3.1 containsMode

这个属性决定了 Shape 的 contains() 的定义。当您添加输入事件处理时候，如果仅希望鼠标或者触控点完全位于 Shape 内部才会做出反应，就需要使用该属性。

  • Shape.BoundingRectContains：QQuickItem::contains() 的默认实现仅检查给定点是否在矩形边界框内。这是最有效的实现，因此它是默认选项。

  • Shape.FillContains：检查构成此 Shape 的任何 ShapePath 的内部（如果您以填充方式渲染时将被填充的部分）是否包含给定点。您添加的 ShapePath 越复杂和越多，检查效率越低，这可能会减慢应用程序中的事件传递，因此应谨慎使用。

3.2 rendererType

  • Shape.UnknownRenderer：渲染器未知。

  • Shape.GeometryRenderer：用于 GPU 渲染的通用、与驱动程序无关的解决方案。使用与 QPainter 的 OpenGL 2 绘图引擎相同的基于 CPU 的三角剖分方法。当使用基于 RHI 的 Qt Quick 场景图后端时，这是默认选项。

  • Shape.SoftwareRenderer：使用光栅绘图引擎的纯 QPainter 绘制。当 Qt Quick 场景图在软件后端运行时，这是默认且唯一的选项。

  • Shape.CurveRenderer：基于 GPU 的渲染器，旨在在任何缩放比例下保留曲率。与 Shape.GeometryRenderer 相比，曲线不是通过短直线近似的，而是使用专门的片段着色器渲染。这提高了视觉质量，并避免在缩放时重新细分带来的性能损失。此外，Shape.CurveRenderer 提供原生高质量的抗锯齿，而无需多重或超采样的性能开销。

默认情况下，Shape.GeometryRenderer 将被选中，除非 Qt Quick 场景图在软件后端运行。在这种情况下，将使用 Shape.SoftwareRenderer。可以通过 preferredRendererType 属性请求使用 Shape.CurveRenderer。

注意：Shape.CurveRenderer 会使用二次曲线近似三次曲线，因此在形状的数学正确可视化上可能略有偏差。此外，如果形状被渲染到 Qt Quick 3D 场景中，并且 RHI 的 OpenGL 后端处于活动状态，则需要 GL_OES_standard_derivatives 扩展（在 OpenGL ES 3 及更高版本中默认可用，但在 OpenGL ES 2 中是可选的）。

示例参考：/assets/Qt6/qml_14_Shape/PathArc.qml

https://www.qt.io/blog/smooth-vector-graphics-in-qt-quick?utm_source=installer&utm_medium=banner&utm_campaign=installer4Qt67

https://doc.qt.io/qt-6/qtgraphs-overview-2d.html?utm_source=installer&utm_medium=banner&utm_campaign=installer4Qt67

https://doc.qt.io/qt-5/qtcharts-qmlchart-example.html

https://doc.qt.io/qt-6/qml-qtcharts-chartview.html

https://doc.qt.io/qt-6/qtcharts-index.html

https://git.qt.io/esabraha/weatherforecastexample