#程序员节快乐。#

今天是10月24日，是程序员节，为了庆祝，去加了一天班......

啥？

你问我为什么不休息一天？

就像康熙不喜欢他的第八个儿子

因为八阿哥（bug）

前言

前一篇我们了解了在QML中如何使用Canvas进行简单图形的绘制，今天我们继续学习Canvas的一些其他知识，来使我们绘制的图像更好看，更高级。

阴影

2D对象的路径可以使用阴影增强显示效果。阴影就是一个使用偏移量、颜色和模糊来实现的特定区域的轮廓线。所以要实现阴影效果，需要指定一个阴影颜色（shadowColor）、阴影X轴偏移值（shadowOffsetX）、阴影Y轴偏移值（shadowOffestY）和阴影模糊（shadowBlur）。这些参数的定义都使用2D context来定义。2D context是唯一的绘制操作接口。

阴影也可以用来创建发光的效果。下面的例子中，我们在一个黑色的背景上，使用蓝色的光创建了一个“Mikasoi”文本。

首先我们绘制黑色的背景：

ctx.strokeStyle = "#333"
ctx.fillRect(0, 0, paint.width, paint.height)

然后定义我们的阴影效果配置：

ctx.shadowColor = "blue"
ctx.shadowOffsetX = 4
ctx.shadowOffsetY = 4
ctx.shadowBlur = 10

最后，我们使用80像素宽的Courier字体来绘制“Mikasoi”文本：

ctx.font = 'bold 80px Courier'
ctx.fillStyle = "#33a9ff"
ctx.fillText("Mikasoi", 80, 150)

完整示例代码如下：

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 480
    height: 300
    color: "white"

    Canvas {
        id: paint
        anchors.fill: parent

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

            ctx.strokeStyle = "#333"
            ctx.fillRect(0, 0, paint.width, paint.height)

            ctx.shadowColor = "blue"
            ctx.shadowOffsetX = 4
            ctx.shadowOffsetY = 4
            ctx.shadowBlur = 10

            ctx.font = 'bold 80px Courier'
            ctx.fillStyle = "#33a9ff"
            ctx.fillText("Mikasoi", 80, 150)
        }
    }
}

运行效果如下：

图片

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

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 480
    height: 300
    color: "white"

    Canvas {
        //id: paint
        anchors.fill: parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.drawImage('image/basketball.png', 10, 10)

            ctx.save()

            ctx.strokeStyle = '#ff2a68'
            ctx.beginPath()
            ctx.moveTo(210,10)
            ctx.lineTo(330,10)
            ctx.lineTo(270,110)
            ctx.closePath()
            ctx.clip()
            ctx.drawImage('image/basketball.png', 200, 10)

            ctx.stroke()
            ctx.restore()
        }

        Component.onCompleted: {
            loadImage("image/basketball.png")
        }
    }
}

运行效果如下：

在上面的例子中，左侧的篮球绘制在左上角位置。右侧的图像显示了应用了剪辑路径效果的球。 图像和任何其他路径可以使用路径剪辑。通过定义路径并调用 clip() 函数来应用剪辑。所有 clip() 函数以下绘图操作现在将被此路径剪辑。通过恢复先前的状态或将剪辑区域设置为整个画布，则会禁用剪辑效果。