QML Book 第七章 画布（Canvas）元素 1

7.画布（Canvas）元素

** 注意: **
最新的构建时间：2016/03/21
这章的源代码能够在assetts folder找到。

glowlines

早在 Qt 4 引入 QML 时，是有一些关于 Qt Quick 需要一个椭圆的讨论的。如果要加入椭圆的话，那么是不是其他人可以提出加入其他的形状，那么是不是也需要支持呢？所以在 Qt Quick 中并没有椭圆形只有矩形。如果我们在 Qt 4 中需要的话，则需要使用图片或者编写自己的 C++ 椭圆元素。

为了支持脚本绘图 Qt 5 引入了 Canvas 元素。画布元素提供了一个依赖于分辨率的位图画布，可用于图形，游戏或使用 JavaScript 即时绘制其他可视图像。Canvas 元素基于 HTML5 的 Canvas 元素。

canvas 元素的基本思想是使用上下文 2D 对象来渲染路径。 上下文 2D 对象包含必要的图形功能，而画布则作为绘图画布。2D 上下文支持笔画，填充，渐变，文本和不同的路径创建命令集。

我们来看一个简单的路径图的例子：

import QtQuick 2.5

Canvas {
    id: root
    // canvas size
    width: 200; height: 200
    // handler to override for drawing
    onPaint: {
        // get context to draw with
        var ctx = getContext("2d")
        // setup the stroke
        ctx.lineWidth = 4
        ctx.strokeStyle = "blue"
        // setup the fill
        ctx.fillStyle = "steelblue"
        // begin a new path to draw
        ctx.beginPath()
        // top-left start point
        ctx.moveTo(50,50)
        // upper line
        ctx.lineTo(150,50)
        // right line
        ctx.lineTo(150,150)
        // bottom line
        ctx.lineTo(50,150)
        // left line through path closing
        ctx.closePath()
        // fill using fill style
        ctx.fill()
        // stroke using line width and stroke style
        ctx.stroke()
    }
}

这产生一个填充的矩形，起始点为 50,50，大小为 100，笔画用作边框装饰。

rectangle

笔画宽度设置为 4，并使用由 strokeStyle 定义的蓝色。最终的形状被设置为通过 fillStyle 填充的“steelblue” 颜色。只有通过调用 stroke 或 fill 实际路径才能绘制出来，可以独立使用。调用 stroke 或 fill 将绘制当前路径。不能存储路径以供稍后重用，绘制状态只能存储（stored）和还原（restored）。

在 QML 中，Canvas 元素充当绘图的容器。 2D 上下文对象提供实际绘图操作。实际绘图需要在 onPaint 事件处理程序中完成。

Canvas {
    width: 200; height: 200
    onPaint: {
        var ctx = getContext("2d")
        // setup your path
        // fill or/and stroke
    }
}

画布本身提供了典型的二维笛卡尔坐标系，其中左上角是（0,0）点。y 值随着向下增加而增加，x 值随着向右移动增加。

基于路径的 API 的典型命令顺序如下：

1. 设置笔触、填充或笔触和填充同时设置
2. 创建路径
3. 设置笔触、填充或笔触和填充同时设置

    onPaint: {
        var ctx = getContext("2d")

        // setup the stroke
        ctx.strokeStyle = "red"

        // create a path
        ctx.beginPath()
        ctx.moveTo(50,50)
        ctx.lineTo(150,50)

        // stroke path
        ctx.stroke()
    }

这产生从点 P1（50,50） 到点 P2（150,50） 的水平划线。

line

** 注意： **
通常，我们总是希望在重置路径时设置一个起点，因此在 beginPath 之后的第一个操作通常是 moveTo。

7.1 便捷的 API

对于矩形操作，提供方便的API，直接调用笔触或填充进行绘制。

// convenient.qml

import QtQuick 2.5

Canvas {
    id: root
    width: 120; height: 120
    onPaint: {
        var ctx = getContext("2d")
        ctx.fillStyle = 'green'
        ctx.strokeStyle = "blue"
        ctx.lineWidth = 4

        // draw a filles rectangle
        ctx.fillRect(20, 20, 80, 80)
        // cut our an inner rectangle
        ctx.clearRect(30,30, 60, 60)
        // stroke a border from top-left to
        // inner center of the larger rectangle
        ctx.strokeRect(20,20, 40, 40)
    }
}

convenient

** 注意： **
行程区域延伸各占路径两侧线宽的一半。4 px lineWidth 将在路径外面绘制 2 像素，内部 2 像素。

7.2 渐变

画布可以使用颜色的形状填充，但也可以使用渐变或图片。

    onPaint: {
        var ctx = getContext("2d")

        var gradient = ctx.createLinearGradient(100,0,100,200)
        gradient.addColorStop(0, "blue")
        gradient.addColorStop(0.5, "lightsteelblue")
        ctx.fillStyle = gradient
        ctx.fillRect(50,50,100,100)
    }

该示例中的渐变沿着起始点（100,0）到终点（100,200）定义，这在画布的中间给出了一条垂直线。 梯度停止可以定义为从0.0（渐变起始点）到1.0（渐变终点）的颜色。 这里我们在位置 0.0（100,0） 使用颜色“blue”，在位置 0.5（100,200） 使用颜色“lightsteelblue”。渐变的范围比我们要绘制的矩形大得多，因此矩形将渐变剪切和限定在其形状范围内。

gradient

** 注意： **
渐变要在画布坐标中定义，而不是相对于要绘制的路径的坐标。画布没有相对坐标的概念，就像现在我们在 QML 中使用的那样。

7.3 阴影

可以使用 2D 上下文对象的阴影来增强路径的显示效果。阴影是路径周围的区域，具有偏移，颜色和指定的模糊。为此，我们可以指定一个 shadowColor、shadowOffsetX、shadowOffsetY 和 shadowBlur。 所有这一切都需要使用 2D 上下文来定义。 2D 上下文是我们唯一的绘图操作 API。

也可以使用阴影在路径周围创建辉光效果。在下一个例子中，我们创建一个文字“Canvas”，周围有白色的光晕。 所有这一切都在黑暗的背景下，以提高可见度。

首先我们画出黑暗的背景：

        // setup a dark background
        ctx.strokeStyle = "#333"
        ctx.fillRect(0,0,canvas.width,canvas.height);

然后，我们定义我们的阴影配置，它将用于下一个路径的显示：

        // setup a blue shadow
        ctx.shadowColor = "#2ed5fa";
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = 10;

最后，我们使用 Ubuntu 字体系列中的一个大胆的 80px 大小的字体绘制 “Canvas” 文本。

        // render green text
        ctx.font = 'bold 80px Ubuntu';
        ctx.fillStyle = "#24d12e";
        ctx.fillText("Canvas!",30,180);

下面是其显示效果：

shadow