Canvas2D：WatchUI 演示
内容提要
Qt 6.12 的 Canvas2D 支持用 JavaScript 在 GPU 上绘图。作者据此构建智能手表演示 WatchUI，含六个可滑动视图，全部用 QML、JS 和着色器实现，无 C++ 代码。Canvas2D 负责几何图形，Qt Quick Effect Maker 着色器负责逐像素效果，二者互补。演示还展示 Qt Quick 统一的 2D 与 3D 渲染，2D 界面可直接映射到 3D 手表模型并保持交互。
延伸解读
Canvas2D 与着色器效果的分工逻辑
文章通过 WatchUI 演示揭示了 Canvas2D 与 Qt Quick Effect Maker 着色器的高效分工：Canvas2D 擅长处理可描述的几何图形，如时钟指针、贝塞尔曲线和文本；着色器则擅长逐像素效果，如辉光、噪声和折射。两者结合时，Canvas2D 可置于着色器之上或作为着色器输入，且都直接融入 Qt Quick 场景图，无中间纹理上传，性能开销低。这种分工让开发者能各取所长，避免用路径模拟像素效果的笨拙做法。
Qt Quick 统一 2D 与 3D 渲染的实用价值
演示将整个 2D 界面映射到 3D 手表模型上，且保持完全交互。这得益于 Qt Quick 与 Qt Quick 3D 共享同一渲染器和图形抽象层，2D 子树可直接作为 3D 场景中的纹理，无需手动实现渲染到纹理的管线。这意味着开发者可以像开发普通 2D 界面一样构建交互表面，然后无缝放入 3D 产品中，且同一份 QML 代码在 2D 窗口和 3D 模型上都能运行，提高了代码复用性和开发效率。
无 C++ 代码的高性能 UI 实现路径
WatchUI 完全使用 QML、JavaScript 和 GLSL 实现，没有一行 C++ 代码。这打破了以往在 Qt 中实现高性能自定义 UI 需要编写底层 QSG 节点或 QQuickPaintedItem 的惯例。通过 Canvas2D 和 QQEM，视觉层完全由数据驱动，支持热重载，极大提升了原型迭代速度。对于手表界面、仪表盘等需要频繁调整视觉效果的场景，这种纯声明式加脚本的方式显著降低了开发门槛和维护成本。
技术预览阶段的反馈与未来可能
Canvas2D 在 Qt 6.12 中仍为技术预览，意味着 API 尚未完全定型，开发者的反馈能直接影响其演进。文章提到 Canvas Painter 已支持自定义着色器画刷，但 Canvas2D 暂未支持，未来可能借此优化水波等效果的实现，减少额外渲染步骤。当前阶段正是尝试和提出改进意见的时机，通过 Qt 缺陷追踪器或论坛反馈，可以推动 API 更完善，为后续正式版本积累最佳实践。
Q&A
Canvas2D 是什么？它在 Qt 6.12 中有什么作用？
Canvas2D 是 Qt 6.12 中新增的 QML 项，允许使用 JavaScript 通过 Qt Canvas Painter 在 GPU 上绘图。它用于高性能的 2D 可视化，无需编写 C++ 代码。
WatchUI 演示是什么？它展示了哪些技术？
WatchUI 是一个智能手表演示应用，包含六个可滑动视图，运行在 3D 手表模型上。它完全使用 QML、JavaScript 和着色器实现，没有 C++ 代码，展示了 Canvas2D 和 Qt Quick Effect Maker 着色器的结合，以及 Qt Quick 统一的 2D 和 3D 渲染。
Canvas2D 和 Qt Quick Effect Maker 着色器如何互补？
Canvas2D 擅长绘制可描述的几何图形（如时钟指针、贝塞尔曲线、文本），而着色器擅长逐像素效果（如发光、噪声、折射）。它们可以结合使用：着色器作为背景，Canvas 作为着色器输入，或单独使用。两者都是 Qt Quick 场景图的一等公民，组合成本低。
WatchUI 如何利用 Qt Quick 的统一 2D 和 3D 渲染？
WatchUI 将整个 2D UI 映射到 3D 手表模型的显示表面。由于 Qt Quick 和 Qt Quick 3D 共享一个渲染器和图形抽象（QRhi），2D 子树可以作为 3D 场景中的纹理，且保持交互性。所有内容在同一帧图中提交，无需手动渲染到纹理。
在 WatchUI 中，Canvas2D 如何实现可调节抗锯齿来制作发光效果？
在 MUSIC 视图中，通过两次描边实现发光：第一次使用较宽的线宽和 antialias=10 产生柔和边缘，第二次使用白色和 antialias=1 绘制清晰核心。这只需两次绘制调用，无需模糊通道。
WatchUI 的 WATER 视图如何将 Canvas2D 输出作为着色器输入？
WATER 视图中，Canvas2D 绘制玻璃杯和水面形状，但设置 visible: false，将其渲染结果作为 BubblesEffect 着色器的源。着色器添加气泡和折射效果，实现了几何与逐像素效果的完美分工。
WatchUI 演示中是否使用了 C++ 代码？
没有。整个演示完全使用 QML、JavaScript 和 GLSL 着色器实现，没有一行 C++ 代码。这展示了无需 C++ 即可创建高性能 UI 的可能性。
