Canvas QML 类型

提供了一种允许通过 JavaScript 绘制的 2D 画布项目。详情...

• 所有成员的列表，包括继承成员
• 已弃用成员

属性

• available : bool
• canvasSize : size
• context : object
• contextType : string
• renderStrategy : enumeration
• renderTarget : enumeration

信号

• imageLoaded()
• paint(rect region)
• painted()

方法

• cancelRequestAnimationFrame(int handle)
• object getContext(string contextId, ... args)
• isImageError(url image)
• isImageLoaded(url image)
• isImageLoading(url image)
• loadImage(url image, size sourceSize)
• markDirty(rect area)
• int requestAnimationFrame(callback)
• requestPaint()
• bool save(string filename, size imageSize)
• string toDataURL(string mimeType)
• unloadImage(url image)

详细描述

The Canvas item allows drawing of straight and curved lines, simple and complex shapes, graphs, and referenced graphic images. It can also add text, colors, shadows, gradients, and patterns, and do low level pixel operations. The Canvas output may be saved as an image file or serialized to a URL.

Rendering to the Canvas is done using a Context2D object, usually as a result of the paint signal.

To define a drawing area in the Canvas item set the width and height properties. For example, the following code creates a Canvas item which has a drawing area with a height of 100 pixels and width of 200 pixels

import QtQuick 2.0
Canvas {
    id: mycanvas
    width: 100
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
        ctx.fillRect(0, 0, width, height);
    }
}

Currently the Canvas item only supports the two-dimensional rendering context.

线程渲染和渲染目标

In Qt 6.0 the Canvas item supports one render target: Canvas.Image.

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

默认的渲染目标是Canvas.Image，默认的renderStrategy是Canvas.Immediate。

像素操作

支持所有HTML5 2D上下文像素操作。为了确保提高像素读取/写入性能，应选择Canvas.Image渲染目标。

迁移现有HTML5 Canvas应用程序的技巧

尽管Canvas项目提供了类似HTML5的API，但HTML5 Canvas应用程序需要在Canvas项目中进行修改以运行。

• 将所有DOM API调用替换为QML属性绑定或Canvas项目方法。
• 将所有HTML事件处理器替换为MouseArea项目。
• 将setInterval/setTimeout函数调用替换为Timer项目，或使用requestAnimationFrame()。
• 将绘画代码放入onPaint处理程序中，并通过调用markDirty()或requestPaint()方法来触发绘画。
• 要绘制图像，通过调用Canvas的loadImage()方法来加载它们，然后在onImageLoaded处理程序中请求绘制它们。

从Qt 5.4开始，Canvas是一个纹理提供商，可以直接用于ShaderEffects和其他消费纹理提供商的类。

另请参阅Context2D、QQuickPaintedItem和Qt Quick示例 - 指针处理程序。

属性文档

信号文档

方法文档