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

Question

I've loaded a PNG image into my QML code and enabled dragging on it.
Image {
source: "image.png"
width: 128
height: 128
MouseArea {
anchors.fill: parent
drag.target: parent
}
}
The problem is that the whole image is selectable, even the transparent parts which I need to disable selecting on these areas. I even tried to make the Canvas from the image, but the problem remains.
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
}
}
Here is the image which the only red part should be selectable:
Any idea?

Answer 1

You can get the image data with this method:
CanvasImageData getImageData(real sx, real sy, real sw, real sh)
Then you can check the pixel color values on the click position and decide whether or not to make a selection.
You can find additional info on how to access individual pixels here. It is for HTML canvas, but the QML canvas should be fully compatible.
...
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
}
}