QML类型说明-Canvas

Canvas

ImportStatement:   import QtQuick 2.2

Since:  Qt 5.0

Inherits:      Item

 

Properties

available :size

canvasSize :size

canvasWindow: rect

context :object

contextType: string

renderStrategy: enumeration

renderTarget: enumeration

tileSize :size

 

Signals

imageLoaded()

paint(rectregion)

painted()

 

Methods

cancelRequestAnimationFrame(longhandle)

objectgetContext(string contextId, any)

isImageError(urlimage)

isImageLoaded(urlimage)

isImageLoading(urlimage)

loadImage(urlimage)

markDirty(rectarea)

longrequestAnimationFrame(callback)

requestPaint()

boolsave(string filename)

stringtoDataURL(string mimeType)

unloadImage(urlimage)

 

DetailedDescription

Canvas允许我们画直线和曲线，简单和复杂的形状，图表，引入一张图片。它也能添加文本，颜色，阴影，渐变、调色板，能进行低级别的像素处理。Canvas能输出到一张图片文件，也能作为URL交付其他组件使用。

可通过width和height属性来设置画布的面积。例如，下面的代码定义了宽100像素，高200像素的画布。

importQtQuick 2.0

Canvas {

    id: mycanvas

    width: 100

    height: 200

}

当前Canvas只支持二维渲染。

线程渲染和渲染目标

Canvas支持两种渲染目标：Canvas.Image和Canvas.FramebufferObject。

Canvas.Image是QImage对象，这个渲染目标支持后台渲染线程，这允许复杂或长时间运行的绘制操作不会阻塞用户界面。

Canvas.FramebufferObject是通过OpenGL硬件加速来处理画布。因为不需要在内存中进行渲染操作，从而在许多情形中，渲染变得更快。它依赖的OpenGL扩展GL_EXT_framebuffer_multisample和GL_EXT_framebuffer_blit能提供抗锯齿功能。当渲染策略不是Canvas.Cooperative时，它会消费更多的图形内存。

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

 

瓷片画布

通过设置canvasSize、tileSize和canvasWindow，Canvas能支持瓷片渲染。

瓷片系统允许我们通过一个小的画布窗口显示一个巨大的虚拟画布。这个功能实际消费的内存跟画布窗口的尺寸关联。画笔不需要经过坐标转换，就可以在虚拟画布上作画。瓷片重叠的区域在需要重绘的时候消除缓存，在一些情况下，这能明显提高性能。

 

像素操作

所有符合HTML5 2D内存的像素操作都被支持。为了确保像素的读写性能的提高，请选择Canvas.Image作为渲染目标。因为Canvas.FramebufferObject在操作像素的时候，要求在系统内存和图形卡之间交换数据。这明显要昂贵得多。渲染和可以和V-sync信号同步，以避免显示的画面是撕裂的。它会进一步影响Canvas.FramebufferObject的像素操作。

 

移植现有的HTML5画布应用。

尽管Canvas提供了所有的HTML5的API。HTML5的画布应用还需要做下面的修改，才能运行在Canvas上。

1、所有的DOM API调用需用QML属性绑定或Canvas方法替换。

2、用MouseArea替换所有HTML事件处理

3、用Timer或requestAnimationFrame()修改setInterval/setTimeout的功能调用

4、绘制使用onPaint句柄，用markDirty()或requestPaint()方法触发绘制。

5、绘制图片时，用loadImage()加载图片，然后在onImageLoaded上提出绘制请求。

同时参阅Context2D。

 

PropertyDocumentation

available :size

指明画布能进行绘制操作的尺寸。

 

canvasSize :size

逻辑画布的大小。默认画布尺寸和当前画布一样大。通过设置canvasSize、tileSize和 canvasWindow将画布变成由许多矩形的瓷片拼成的巨大虚拟画布后,只有当前画布窗口的瓷片，才能被画布渲染引擎渲染。同时参阅tileSize和canvasWindow。

 

canvasWindow: rect

当前画布可见的窗口，默认的窗口尺寸和画布尺寸一样大。左上角的点为(0,0)。如果canvasSize和画布尺寸不同，Canvas能通过改变画布的windowSize或位置来显示画布的不同区域。同时参阅canvasSize和tileSize。

 

context :object

活跃的绘图内容。如果画布准备好，那么通过调用getContext()或设置contextType属性的值为支持的绘制类型，则这个属性为当前活跃的绘制内容，否则为空。

 

contextType: string

用来绘制的类型。这个属性为活跃的绘制类型的名字。如果设置，则画布在变得可用后，将尝试创建绘制类型的绘图内容。类型的名字和getContext()调用的相同，例如2d画布的值为"2d"。同时参阅getContext()和available的属性文档。

 

renderStrategy: enumeration

当前画布的渲染策略。

Canvas.Immediate- 在UI主线程立刻进行渲染。

Canvas.Threaded- 绘制内容在私有渲染线程渲染。

Canvas.Cooperative- 绘制内容提供图形命令到全局渲染线程渲染。

策略的隐藏提供者为renderTarget。renderStrategy、renderTarget或组合可能不被图像系统支持。在这种情况下，绘制内容将选择合适的策略，画布将有属性改变的信号。设置或运行时测试可能促使QML场景在GUI主线程渲染，此时选择Canvas.Cooperative并不能保证渲染发生在独立于GUI线程的另一线程。默认值为Canvas.Immediate。

 

renderTarget: enumeration

当前画布渲染的目标。

Canvas.Image- 渲染到内存中的图像buffer。

Canvas.FramebufferObject- 渲染到OpenGL的帧buffer。

隐藏的提供者是renderStrategy定义的渲染方法。renderStrategy、renderTarget或组合可能不被图像系统支持。在这种情况下，绘制内容将选择合适的策略，画布将有属性改变的信号。默认值是Canvas.Image。

 

tileSize :size

画布上的瓷片尺寸。通过设置canvasSize、tileSize和canvasWindow，Canvas能进入瓷片模式。通过渲染和缓存瓷片，而不是渲染整个画布，可以提高渲染性能。消费的内存跟当前可视的区域相关。默认的tileSize和canvasSize一样。

 

SignalDocumentation

imageLoaded()

加载完图片后发射这个信号。

 

paint(rectregion)

当区域需要渲染时发射这个信号。如果绘制内容是活跃的，可从绘制内容的属性中引用。它也能通过markdirty()、requestPaint()或改变当前画布窗口来触发。

 

painted()

所有的绘制命令被执行，同时画布被渲染完毕后，这个信号触发。

 

MethodDocumentation

cancelRequestAnimationFrame(longhandle)

取消动画回调引用的处理。

 

objectgetContext(string contextId, any)

这里没有资料，等待中……

 

isImageError(urlimage)

如果图片加载失败，返回真。

 

isImageLoaded(urlimage)

图片成功加载并准备好使用时，返回真。

 

isImageLoading(urlimage)

图片正在加载则返回真。

 

loadImage(urlimage)

异步加载一张图片。当图片准备好，imageLoaded将被发射。通过unloadImage()可卸载加载好的图片。注意：只有加载的图片能被画布绘制。同时参阅unloadImage、imageLoaded、isImageLoaded()、Context2D::createImageData()和Context2D::drawImage()。

 

markDirty(rectarea)

给一个区域标记为脏，如果这个区域可视，则画布重绘它，这回出发paint信号。

 

longrequestAnimationFrame(callback)

在组成Qt Quick场景之前分配被调用的回调。

 

requestPaint()

请求重绘可视区域。

 

boolsave(string filename)

保存当前的画布内容到图片文件。保存的图片格式被文件名的后缀自动决定。注意：这个方法的调用将强迫绘制整个画布，不只是绘制可视的窗口中的内容。

 

stringtoDataURL(string mimeType)

为画布中的图片返回URL。默认的mimeType是"image/png"

 

unloadImage(urlimage)

卸载图片，一旦图片被卸载，在再次加载之前，它不能被画布绘制。