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 是完全可见的)