How to exclude the transparent area to receive mouse events under MouseArea element?

adaitabehera

I have a image with transparent background. I want define the MouseArea that will include only the non-transparent part of the image.
How to do that? Currently it is taking the complete rectangle (including the transparent area) that hods the image.

Below is my code snippet inside Rectangle { } element:

@Image
{
id: image1
anchors.left: parent.left
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
source: "images/launch.png"
scale: 0.4
smooth: true

MouseArea
{
    id: mouseArea1
    anchors.fill: parent
    hoverEnabled: true
    onPressed: console.log("mouse pressed\n")
}

}

Text
{
text: "Launch"
font.pixelSize: 18
anchors.left: image1.right
anchors.verticalCenter: parent.verticalCenter
color: mouseArea1.containsMouse ? "light blue" : "white"
}@

sierdzio

I'm afraid you need to check the colour under the cursor every time a click is made. At least I don't know any other solution.

Jens

There is no simple way to filter mouse events by image data. The only option apart from using a custom C++ Item, would be to draw the image with a Canvas element and use the getData function to get the alpha value/transparency of a pixel on each mousePress.

I would however suggest that you simply approximate the clickable button area by setting some appropriate anchor margins on the mouse Area as it is good enough in most normal use cases.