如何在Qt / QML中使图像的透明部分不可选

Question

我已将PNG图像加载到我的QML代码中并启用了拖动它。

Image {
    source: "image.png"
    width: 128
    height: 128

    MouseArea {
        anchors.fill: parent
        drag.target: parent
    }
}

问题是整个图像是可选择的，甚至是我需要禁用在这些区域上选择的透明部分。我甚至尝试从图像中制作Canvas，但问题仍然存在。

Canvas {
    width: 128
    height: 128

    Component.onCompleted: loadImage("image.png")
    onImageLoaded: requestPaint()
    onPaint: {
        var ctx = getContext("2d")
        var im = ctx.createImageData("image.png")
        im.data[3] = 128
        ctx.drawImage(im, 0, 0)
    }

    MouseArea {
        anchors.fill: parent
        drag.target: parent
    }
}

这是唯一可以选择红色部分的图像：

有什么想法吗？

Answer 1

您可以使用this method获取图像数据：

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

然后，您可以检查点击位置的像素颜色值，并决定是否进行选择。

您可以找到有关如何访问单个像素的其他信息here。它适用于HTML画布，但QML画布应完全兼容。

...
MouseArea {
        anchors.fill: parent
        drag.target: parent
        onClicked: {
            var ctx = parent.getContext("2d")
            // get the pixel
            var imageData = ctx.getImageData(mouseX, mouseY, 1, 1)
            // read the color data and decide whether to select or not
        }
}