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之间。
同样应用在清屏函数中。

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