QML Canvas的使用

一、基本概念

QML Canvas是一种用于绘制2D图形的QML元素。它通过JavaScript API提供了一组常用的2D绘图函数，并且可在其内部定义多个图层，达到分层绘制的目的。

当你需要在QML应用程序中进行自定义的2D绘图时，例如绘制图表、地图、图像编辑器等，QML Canvas是一个非常好的选择。

二、基本用法

在QML中使用Canvas元素非常简单。首先我们需要引入Canvas元素：

import QtQuick.Canvas 2.0

然后我们就可以创建一个Canvas元素并定义相应的属性了：

Canvas {
    id: myCanvas
    width: 200
    height: 200
    onPaint: {
        // 在此处写入绘图代码
    }
}

在onPaint回调函数中，我们可以使用JavaScript API进行绘图。QML Canvas提供的函数包括rect、circle、line、arc、curve等。

例如，我们可以使用以下代码在Canvas中绘制一个黑色填充的矩形：

Canvas {
    id: myCanvas
    width: 200
    height: 200
    onPaint: {
        // 绘制一个黑色填充的矩形
        context.fillStyle = "#000000";
        context.fillRect(0, 0, width, height);
    }
}

如果我们希望绘制一个动态的图形，就需要在onPaint回调函数中使用定时器反复调用绘图代码。例如：

Canvas {
    id: myCanvas
    width: 200
    height: 200
    onPaint: {
        var angle = 0;
        setInterval(function(){
            // 绘制一个不断旋转的黄色正方形
            angle += 0.1;
            context.fillStyle = "#FFFF00";
            context.save();
            context.translate(width/2, height/2);
            context.rotate(angle);
            context.fillRect(-50, -50, 100, 100);
            context.restore();
        }, 30);
    }
}

上述代码将在Canvas中绘制一个不断旋转的黄色正方形。

三、图层分层

在QML Canvas中，可以分别定义多个图层，并且可以通过设置透明度、z轴等属性，实现图层间的叠加绘制。

例如，我们可以定义两个图层，一个用于绘制文本，一个用于绘制矩形。在绘制文本的图层中，我们使用textAlign、textBaseline等属性进行文本对齐，并设置alpha值为0.5实现文本透明度。在绘制矩形的图层中，我们使用fillRect函数绘制一个红色的填充矩形，并设置z值大于文本图层，使其显示在文本上方：

Canvas {
    id: myCanvas
    width: 200
    height: 200
    
    // 文本图层
    Layer {
        id: textLayer
        width: 200
        height: 200
        
        onPaint: {
            // 绘制文本
            context.font = "bold 20px Arial";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillStyle = "#FFFFFF";
            context.globalAlpha = 0.5;
            context.fillText("Hello", width/2, height/2);
        }
    }
    
    // 矩形图层
    Layer {
        id: rectLayer
        width: 200
        height: 200
        z: 1
        
        onPaint: {
            // 绘制矩形
            context.fillStyle = "#FF0000";
            context.fillRect(0, 0, width, height);
        }
    }
}

上述代码将在Canvas中分别绘制文本和矩形图层，并通过z属性使得矩形图层位于文本图层上方。

四、鼠标事件处理

除了绘图，QML Canvas还可以处理鼠标事件。我们可以通过定义onMouseXxx回调函数，处理鼠标按下、鼠标移动、鼠标释放等事件。

例如，我们可以使用以下代码在Canvas中响应鼠标移动事件，并在文本图层中绘制以鼠标位置为中心的圆形：

Canvas {
    id: myCanvas
    width: 200
    height: 200
    
    property int mouseX: 0
    property int mouseY: 0
    
    // 文本图层
    Layer {
        id: textLayer
        width: 200
        height: 200
        
        onPaint: {
            // 绘制圆形
            context.fillStyle = "#FF0000";
            context.beginPath();
            context.arc(mouseX, mouseY, 10, 0, Math.PI*2, true);
            context.closePath();
            context.fill();
        }
    }
    
    // 鼠标移动事件处理
    onMouseMove: {
        mouseX = mouse.x;
        mouseY = mouse.y;
        textLayer.requestPaint();
    }
}

上述代码将在Canvas中响应鼠标移动事件，并在文本图层中绘制一个以鼠标位置为中心，半径为10的红色圆形。