如何在 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 canvas，但 QML canvas 应该完全兼容。

...
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
        }
}

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

How to make transparent part of image unselectable in Qt/QML

qml

qt5

qtquick2