Canvas2D QML Type

提供了一个 2D 画布控件，支持通过 JavaScript 进行绘制。更多内容...

此类型处于技术预览阶段，可能会有变动。

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

属性

• available : bool
• context : object
• contextType : string

信号

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

方法

• void cancelRequestAnimationFrame(int handle)
• object getContext(string contextId, ... args)
• bool isImageError(url image)
• bool isImageLoaded(url image)
• bool isImageLoading(url image)
• void loadImage(url image, size sourceSize)
• void markDirty()
• int requestAnimationFrame(callback)
• void requestPaint()
• void unloadImage(url image)

详细说明

Canvas2D 控件支持绘制直线和曲线、简单及复杂的形状、图表以及引用图形图像。此外，它还可以添加文本、颜色、渐变和图案。

通过Canvas2DContext 对象将内容渲染到Canvas上，通常由paint 信号触发。

要在 Canvas2D 控件中定义绘图区域，请设置width 和height 属性。例如，以下代码创建了一个绘图区域高度为 100 像素、宽度为 200 像素的 Canvas2D 控件：

import QtCanvas2D

Canvas2D {
    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);
    }
}

移植现有 HTML5 Canvas 应用程序的提示

尽管 Canvas 组件提供了类似 HTML5 的 API，但 HTML5 Canvas 应用程序仍需进行修改才能在 Canvas 组件中运行：

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

另请参阅 Canvas2DContext 、QCanvasPainterItem 和QCanvasPainter 。

属性文档

available : bool

表示 Canvas 何时能够提供一个可用于操作的绘图上下文。

context : object

保存活动绘图上下文。

如果画布已就绪，且已成功调用getContext()方法，或者已将contextType 属性设置为受支持的上下文类型，则该属性将包含当前的绘图上下文；否则为null。

contextType : string

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

此属性被设置为当前活动上下文类型的名称。

如果显式设置，画布将在可用后尝试创建指定类型的上下文。

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

另请参阅 getContext() 和available 。

Signal 文档

imageLoaded()

当图像加载完成时，会触发此信号。

另请参阅 loadImage()。

paint(rect region)

当需要渲染region 时，会发出此信号。如果存在活动上下文，可通过context属性引用该上下文。

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

painted()

该信号在所有上下文绘制命令执行完毕且画布已渲染后触发。

方法文档

void cancelRequestAnimationFrame(int handle)

此函数将取消由handle 引用的动画回调。

object getContext(string contextId, ... args)

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

contextId 参数用于指定所需的绘图上下文。Canvas2D 参数将返回一个实现了所需绘图模式的上下文。首次调用 getContext 之后，后续任何使用相同 contextId 调用的 getContext 都将返回相同的上下文对象。任何其他参数（args ）目前均被忽略。

如果该上下文类型不受支持，或者画布此前已被请求提供另一种不兼容的上下文类型，则将返回null 。

Canvas2D 仅支持 2D 上下文。

bool isImageError(url image)

如果image 加载失败，则返回true ；否则返回false 。

另请参阅 loadImage()。

bool isImageLoaded(url image)

如果image 已成功加载且已准备就绪，则返回true。

另请参阅 loadImage()。

bool isImageLoading(url image)

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

另请参阅 loadImage()。

void loadImage(url image, size sourceSize = undefined)

异步加载给定的image 。

一旦图像准备就绪，将触发imageLoaded()信号。可通过unloadImage()方法卸载已加载的图像。

如果指定了sourceSize ，图像将在加载过程中按该尺寸进行缩放。这对于以预期显示尺寸加载可缩放（矢量）图像（例如 SVG）非常有用。

另请参阅 unloadImage()、imageLoaded()、isImageLoaded()、Context2D::createImageData() 以及Context2D::drawImage()。

void markDirty()

将画布标记为“脏”。这将触发paint 信号。

另请参阅 paint 和requestPaint()。

int requestAnimationFrame(callback)

该函数将callback 的调用安排在构建Qt Quick 场景之前执行。

void requestPaint()

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

另请参阅 markDirty()。

void unloadImage(url image)

卸载image 。

一旦图像被卸载，除非再次加载，否则无法通过画布上下文进行绘制。

另请参阅 loadImage()、imageLoaded()、isImageLoaded()、Context2D::createImageData() 以及Context2D::drawImage 。