QML类型：Canvas

一、描述

Canvas 项目允许绘制直线和曲线、简单和复杂的形状、图形和参考图形图像。 它还可以添加文本、颜色、阴影、渐变和图案，并进行低级像素操作。 Canvas 输出可以保存为图像文件或序列化为 URL。

渲染到 Canvas 是使用 Context2D 对象完成的。

二、线程渲染和渲染目标

在 Qt 6.0 中，Canvas 项支持一个渲染目标：Canvas.Image。

Canvas.Image 渲染目标是一个 QImage 对象。 此渲染目标支持后台线程渲染，允许在不阻塞 UI 的情况下执行复杂或长时间运行的绘制。这是所有 Qt Quick 后端支持的唯一渲染目标。

三、移植现有 HTML5 Canvas 应用程序的技巧

尽管 Canvas 项提供了类似 HTML5 的 API，但 HTML5 画布应用程序需要修改才能在 Canvas 项中运行：

• 用 QML 属性绑定或 Canvas 项目方法替换所有 DOM API 调用。
• 用 MouseArea 项替换所有 HTML 事件处理程序。
• 使用 Timer 项或使用 requestAnimationFrame() 替换 setInterval()/setTimeout() 函数调用。
• 将绘制代码放入 onPaint 处理程序并通过调用 markDirty() 或 requestPaint() 方法触发绘制。
• 要绘制图像，通过调用 Canvas 的 loadImage() 方法加载它们，然后在 onImageLoaded 处理程序中绘制它们。
• Canvas 可以直接在 ShaderEffects 和其他使用纹理提供程序的类中使用。

在一般情况下，Canvas.Image 渲染目标应避免大画布、频繁更新和动画。此外，尽可能使用 QQuickPaintedItem 并通过 QPainter 在 C++ 中实现绘图，而不是更昂贵且性能可能较差的 JavaScript 和 Context2D 方法。

四、属性成员

1、available : bool

指示 Canvas 何时能够提供要操作的绘图上下文。

2、canvasSize : size

保存上下文绘制的逻辑画布大小。默认情况下，画布大小与当前画布项目大小相同。

3、context : object

保存活动的绘图上下文。

如果画布已准备好并且已成功调用 getContext() 或已使用受支持的上下文类型设置了 contextType 属性，则此属性将包含当前绘图上下文，否则为 null。

4、contextType : string

要使用的绘图上下文的类型。

类型名称与 getContext() 调用中使用的相同，对于 2d 画布，该值将是“2d”。

5、renderStrategy : enumeration

保存当前画布渲染策略。

• Canvas.Immediate：上下文将在主 UI 线程中立即执行图形命令。默认值。
• Canvas.Threaded：上下文将图形命令推迟到私有渲染线程。
• Canvas.Cooperative：上下文将图形命令推迟到应用程序全局渲染线程。

此提示与 renderTarget 一起提供给图形上下文以确定渲染方法。 图形上下文可能不支持 renderStrategy、renderTarget 或组合，在这种情况下，上下文将选择适当的选项，而 Canvas 将发出对属性更改的信号。

配置或运行时测试可能会导致 QML 场景图在 GUI 线程中呈现。选择 Canvas.Cooperative 并不能保证渲染将发生在与 GUI 线程分离的线程上。

6、renderTarget : enumeration

保存当前画布渲染目标。

• Canvas.Image：渲染到内存图像缓冲区。默认值。

五、信号成员

1、imageLoaded()

加载图像时发出此信号。对应的处理程序是 onImageLoaded。

2、paint(rect region)

当需要渲染区域时会发出此信号。对应的处理程序是 onPaint。

该信号可以由 markdirty()、requestPaint() 或通过更改当前画布窗口触发。

3、painted()

在执行所有上下文绘制命令并渲染 Canvas 后会发出此信号。对应的处理程序是 onPainted。

六、成员函数

1、cancelRequestAnimationFrame(int handle)

这个函数会取消handle引用的动画回调。

2、object getContext(string contextId, ... args)

返回绘图上下文，如果没有可用的上下文，则返回 null。

contextId 参数命名所需的上下文。在第一次调用 getContext() 之后，任何对具有相同 contextId 的 getContext 的后续调用都将返回相同的上下文对象。

如果上下文类型不受支持或之前已请求画布提供不同且不兼容的上下文类型，则将返回 null。

Canvas 仅支持 2d 上下文。

3、isImageError(url image)

如果图像加载失败，则返回 true，否则返回 false。

4、isImageLoaded(url image)

如果图像已成功加载并准备好使用，则返回 true。

5、isImageLoading(url image)

如果当前正在加载图像，则返回 true。

6、loadImage(url image)

异步加载给定的图像。只有加载的图像才可以绘制在画布项目上。

图像准备好后，将发出 imageLoaded() 信号。加载的图像可使用 unloadImage() 方法卸载。

7、markDirty(rect area)

将给定区域标记为脏区域。当该区域可见时，画布渲染器将重绘它。这将触发 paint() 信号。

8、int requestAnimationFrame(callback)

该函数安排在组成 Qt Quick 场景之前调用的回调。

9、requestPaint()

请求重新绘制整个可见区域。

10、bool save(string filename)

将当前画布内容保存到图像文件 filename 中。 保存的图像格式由文件名的后缀自动决定。 成功返回 true。

调用此方法将强制绘制整个画布，而不仅仅是当前画布可见窗口。

11、string toDataURL(string mimeType)

返回画布中图像的数据 URL。默认的 mimeType 是“image/png”。

12、unloadImage(url image)

卸载图像。一旦图像被卸载，除非再次加载，否则它不能被画布上下文绘制。