QML BOOK 第七章 Canvas Element

7. Canvas Element

注意
最后一次构建:2014年1月20日下午18:00。
这章的源代码能够在http://qmlbook.org/assets/中找到。


在早些时候的Qt4中加入QML时,一些开发者讨论如何在QtQuick中绘制一个圆形。类似圆形的问题,一些开发者也对于其它的形状的支持进行了讨论。在QtQuick中没有圆形,只有矩形。在Qt4中,如果你需要一个除了矩形外的形状,你需要使用图片或者使用你自己写的C++圆形元素。
Qt5中引进了画布元素(canvas element),允许脚本绘制。画布元素(canvas element)提供了一个依赖于分辨率的位图画布,你可以使用JavaScript脚本来绘制图形,制作游戏或者其它的动态图像。画布元素(canvas element)是基于HTML5的画布元素来完成的。
画布元素(canvas element)的基本思想是使用一个2D对象来渲染路径。这个2D对象包括了必要的绘图函数,画布元素(canvas element)充当绘制画布。2D对象支持画笔,填充,渐变,文本和绘制路径创建命令。
让我们看看一个简单的路径绘制的例子:


这个例子产生了一个在坐标(50,50),高宽为100的填充矩形框,并且使用了画笔来修饰边界。


画笔的宽度被设置为4个像素,并且定义strokeStyle(画笔样式)为蓝色。最后的形状由设置填充样式(fillStyle)为steelblue颜色,然后填充完成的。只有调用stroke或者fill函数,创建的路径才会绘制,它们与其它的函数使用是相互独立的。调用stroke或者fill将会绘制当前的路径,创建的路径是不可重用的,只有绘制状态能够被存储和恢复。
在QML中,画布元素(canvas element)充当了绘制的容器。2D绘制对象提供了实际绘制的方法。绘制需要在onPaint事件中完成。


画布自身提供了典型的二维笛卡尔坐标系统,左上角是(0,0)坐标。Y轴坐标轴向下,X轴坐标轴向右。
典型绘制命令调用如下:
1.装载画笔或者填充模式
2.创建绘制路径
3.使用画笔或者填充绘制路径


这将产生一个从P1(50,50)到P2(150,50)水平线。


注意
通常在你重置了路径后你将会设置一个开始点,所以,在beginPath()这个操作后,你需要使用moveTo来设置开始点。

7.1 便捷的接口(Convenient API)

在绘制矩形时,我们提供了一个便捷的接口,而不需要调用stroke或者fill来完成。



注意
画笔的绘制区域由中间向两边延展。一个宽度为4像素的画笔将会在绘制路径的里面绘制2个像素,外面绘制2个像素。

7.2 渐变(Gradients)

画布中可以使用颜色填充也可以使用渐变或者图像来填充。


在这个例子中,渐变色定义在开始点(100,0)到结束点(100,200)。在我们画布中是一个中间垂直的线。渐变色在停止点定义一个颜色,范围从0.0到1.0。这里我们使用一个蓝色作为0.0(100,0),一个高亮刚蓝色作为0.5(100,200)。渐变色的定义比我们想要绘制的矩形更大,所以矩形在它定义的范围内对渐变进行了裁剪。


注意
渐变色是在画布坐标下定义的,而不是在绘制路径相对坐标下定义的。画布中没有相对坐标的概念。

7.3 阴影(Shadows)

注意
在Qt5的alpha版本中,我们使用阴影遇到了一些问题。
2D对象的路径可以使用阴影增强显示效果。阴影是一个区域的轮廓线使用偏移量,颜色和模糊来实现的。所以你需要指定一个阴影颜色(shadowColor),阴影X轴偏移值(shadowOffsetX),阴影Y轴偏移值(shadowOffsetY)和阴影模糊(shadowBlur)。这些参数的定义都使用2D context来定义。2D context是唯一的绘制操作接口。
阴影也可以用来创建发光的效果。在下面的例子中我们使用白色的光创建了一个“Earth”的文本。在一个黑色的背景上可以有更加好的显示效果。
首先我们绘制黑色背景:


然后定义我们的阴影配置:


最后我们使用加粗的,80像素宽度的Ubuntu字体来绘制“Earth”文本:


下面是绘制的效果图:

7.4 图片(Images)

QML画布支持多种资源的图片绘制。在画布中使用一个图片需要先加载图片资源。在我们的例子中我们使用Component.onCompleted操作来加载图片。


在左边,足球图片使用10×10的大小绘制在左上方的位置。在右边我们对足球图片进行了裁剪。图片或者轮廓路径都可以使用一个路径来裁剪。裁剪需要定义一个裁剪路径,然后调用clip()函数来实现裁剪。在clip()之前所有的绘制操作都会用来进行裁剪。如果还原了之前的状态或者定义裁剪区域为整个画布时,裁剪是无效的。


7.5 转换(Transformation)

画布有多种方式来转换坐标系。这些操作非常类似于QML元素的转换。你可以通过缩放(scale),旋转(rotate),translate(移动)来转换坐标系。与QML元素的转换不同的是,转换原点通常就是画布原点。例如,从中心点放大一个封闭的路径,你需要先将画布原点移动到整个封闭的路径的中心点上。使用这些转换的方法你可以创建一些更加复杂的转换。



除了移动画布外,也可以使用scale(x,y)来缩放x,y坐标轴。旋转使用rotate(angle),angle是角度(360度=2*Math.PI)。使用setTransform(m11,m12,m21,m22,dx,dy)来完成矩阵转换。
警告
QML画布中的转换与HTML5画布中的机制有些不同。不确定这是不是一个Bug。
注意
重置矩阵你可以调用resetTransform()函数来完成,这个函数会将转换矩阵还原为单位矩阵。


7.6 组合模式(Composition Mode)

组合允许你绘制一个形状然后与已有的像素点集合混合。画布提供了多种组合模式,使用globalCompositeOperation(mode)来设置。
  • "source-over"
  • "source-in"
  • "source-out"
  • "source-atop"


下面这个例子遍历了列表中的组合模式,使用对应的组合模式生成了一个矩形与圆形的组合。



7.7 像素缓冲(Pixels Buffer)

当你使用画布时,你可以检索读取画布上的像素数据,或者操作画布上的像素。读取图像数据使用createImageData(sw,sh)或者getImageData(sx,sy,sw,sh)。这两个函数都会返回一个包含宽度(width),高度(height)和数据(data)的图像数据(ImageData)对象。图像数据包含了一维数组像素数据,使用RGBA格式进行检索。每个数据的数据范围在0到255之间。设置画布的像素数据你可以使用putImageData(imagedata,dx,dy)函数来完成。
另一种检索画布内容的方法是将画布的数据存储进一张图片中。可以使用画布的函数save(path)或者toDataURL(mimeType)来完成,toDataURL(mimeType)会返回一个图片的地址,这个链接可以直接用Image元素来读取。


在我们这个例子中,我们每秒在左边的画布中绘制一个的圆形。当使用鼠标点击画布内容时,会将内容存储为一个图片链接。在右边将会展示这个存储的图片。


注意
在Qt5的Alpha版本中,检索图像数据似乎不能工作。

7.8 画布绘制(Canvas Paint)

在这个例子中我们将使用画布(Canvas)创建一个简单的绘制程序。


在我们场景的顶部我们使用行定位器排列四个方形的颜色块。一个颜色块是一个简单的矩形,使用鼠标区域来检测点击。


颜色存储在一个数组中,作为绘制颜色使用。当用户点击一个矩形时,矩形内的颜色被设置为colorTools的paintColor属性。
为了在画布上跟踪鼠标事件,我们使用鼠标区域(MouseArea)覆盖画布元素,并连接点击和移动操作。


鼠标点击存储在laxstX与lastY属性中。每次鼠标位置的改变会触发画布的重绘,这将会调用onPaint操作。
最后绘制用户的笔划,在onPaint操作中,我们绘制从最近改变的点上开始绘制一条新的路径,然后我们从鼠标区域采集新的点,使用选择的颜色绘制线段到新的点上。鼠标位置被存储为新改变的位置。

7.9 HTML5画布移植(Porting from HTML5 Canvas)

移植一个HTML5画布图像到QML画布非常简单。在成百上千的例子中,我们选择了一个来移植。
螺旋图形(Spiro Graph)
我们使用一个来自Mozila项目的螺旋图形例子来作为我们的基础示例。原始的HTML5代码被作为画布教程发布。
下面是我们需要修改的代码:
Qt Quick要求定义变量使用,所以我们需要添加var的定义:


修改绘制方法接收Context2D对象:


由于不同的大小,我们需要对每个螺旋适配转换:


最后我们实现onPaint操作。在onPaint中我们请求一个context,并且调用我们的绘制方法。


下面这个结果就是我们使用QML画布移植的螺旋图形。


发光线(Glowing Lines)
下面有一个更加复杂的移植来自W3C组织。原始的发光线有些很不错的地方,这使得移植更加具有挑战性。



在HTML5中,context2D对象可以随意在画布上绘制。在QML中,只能在onPaint操作中绘制。在HTML5中,通常调用setInterval使用计时器触发线段的绘制或者清屏。由于QML中不同的操作方法,仅仅只是调用这些函数不能实现我们想要的结果,因为我们需要通过onPaint操作来实现。我们也需要修改颜色的格式。让我们看看需要改变哪些东西。
修改从画布元素开始。为了简单,我们使用画布元素(Canvas)作为我们QML文件的根元素。


代替直接调用的setInterval函数,我们使用两个计时器来请求重新绘制。一个计时器触发间隔较短,允许我们可以执行一些代码。我们无法告诉绘制函数哪个操作是我想触发的,我们为每个操作定义一个布尔标识,当重新绘制请求时,我们请求一个操作并且触发它。
下面是线段绘制的代码,清屏操作类似。


现在我们已经有了告诉onPaint操作中我们需要执行哪个操作的指示。当我们进入onPaint处理每个绘制请求时,我们需要提取画布元素中的初始化变量。


现在我们的绘制函数应该像这样:


线段绘制函数提取画布作为一个参数。


最大的变化是使用QML的Qt.rgba()和Qt.hsla()。在QML中需要把变量值适配在0.0到1.0之间。
同样应用在清屏函数中。


下面是最终结果(目前没有阴影)类似下面这样。


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页