QML之鼠標在畫布/圖片（Canvas）上點擊時獲取該點的顏色值

應用

我這邊是用到了灰度圖進行導航，黑色爲障礙物區域，白色爲道路，所以可以通過判斷鼠標點擊時獲取的顏色來提示用戶是否將位置點標記在了障礙物上。

示例代碼

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property var ctx

    Canvas{
        id: canvas
        anchors.fill: parent
        onPaint: {
            ctx = getContext("2d")

            ctx.fillStyle = "black"         //rgb: 0 0 0
            ctx.fillRect(0, 0, 320, 240)
            ctx.fillStyle = "LightGray"     //rgb: 211 211 211
            ctx.fillRect(320, 0, 320, 240)
            ctx.fillStyle = "LightSkyBlue"  //rgb: 135 206 250
            ctx.fillRect(0, 240, 320, 240)
            ctx.fillStyle = "Salmon"        //rgb: 250 128 114
            ctx.fillRect(320, 240, 320, 240)
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                var myColor = ctx.getImageData(mouseX, mouseY, 1, 1)
                console.log("my mouse clicked color is:", myColor.data[0], myColor.data[1], myColor.data[2], myColor.data[3])
            }
        }
    }
}

鼠標點擊時會打印此處的像素值

獲取圖片上某點的像素值的方法與上面的一致，只不過需要使用drawImage()函數先將圖片繪製到Canvas中。

---

獲取像素值的函數的定義和用法

getImageData（）

CanvasImageData getImageData(real sx, real sy, real sw, real sh)

Returns an CanvasImageData object containing the image data for the given rectangle of the canvas.

大致意思：此方法返回 了一個CanvasImageData 對象，該對象存放畫布指定矩形的像素數據。

CanvasImageData類型

The CanvasImageData object holds the image pixel data.
The CanvasImageData object has the actual dimensions of the data stored in this object and holds the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.

大致意思：CanvasImageData對象存儲了一個一維數組，該數組以0到255的整數形式保存包含了以RGBA爲順序存儲的數據。

獲取像素值

var colorData = context.getImageData(x, y, width, height)

返回的元素信息如下：
red = colorData.data[0]
green = colorData.data[1]
blue = colorData.data[2]
alpha = colorData.data[3]

RGBA值的內容：
R - 紅色值 (取值：0-255)
G - 綠色值 (取值：0-255)
B - 藍色值 (取值：0-255)
A - 透明度 (取值：0-255; 0 是透明的，255 是完全可見的)