如何在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

您可以使用此方法获取图像数据:

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

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

您可以在此处找到有关如何访问单个像素的其他信息.它适用于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
        }
}