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的紅色圓形。