Congratulations to our 2022 Qt Champions!

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

  • 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:

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

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


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

  • Moderators

    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.

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

Log in to reply