Sending input events through an OpacityMask

Magnus21

Hello, if I use an OpacityMask, I destroy all input events for the components inside.
Minimal example:

OpacityMask {
        width: 200
        height: width
        maskSource: Rectangle {
            width: 200
            height: width
        }
        source: Button {
            width: 200
            height: width
            text: "click me"
            onClicked: console.log("you clicked me");
        }
}

Now, if I try to click the button, nothing happens.
How could I reach through all events to components inside an OpacityMask?

? Offline

Hi!

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    OpacityMask {
        width: 200
        height: width
        maskSource: Rectangle {
            width: 200
            height: width
        }
        source: btn
    }

    Button {
        id: btn
        width: 200
        height: width
        text: "click me"
        onClicked: console.log("you clicked me");
    }
}

Magnus21

Thanks for answering, but I think this is not quite working yet.
I think it is creating two Buttons, one from btn and one for the OpacityMask.

You cannot quite see it in this example, because the OpacityMask doesn't really do anything in this example.
But you can see it, if you modify it to actually do something:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    OpacityMask {
        width: 200
        height: width
        maskSource: Rectangle {
            width: 200
            height: width
            radius: 100
        }
        source: btn
    }

    Button {
        id: btn
        width: 200
        height: width
        text: "click me"
        onClicked: console.log("you clicked me");
        visible: false
    }
}

If you leave out the visible: false, it renders an unmodified version of btn, although it should be modified due to the mask.
Only if you put in the visible: false, it renders only one button and only then you can see that the OpacityMask is actually working, because the button becomes circular.
However, now we are at the old problem: Mouse events do not go through to this actually masked button. Your example was only working, because it rendered an unmodified sane button on top of it. Now it is the same all over again...

Any idea, how we can fix this?

Magnus21

OK, I think I kinda figured it out now.
The Button has to set its own OpacityMask for this to work and cannot just be assigned as a source.
So the working minimal example is now:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        id: btn
        width: 200
        height: width
        text: "click me"
        onClicked: console.log("you clicked me");
        layer.enabled: true
        layer.effect: OpacityMask {
            width: 200
            height: width
            maskSource: Rectangle {
                width: 200
                height: width
                radius: 100
            }
        }
    }
}

Again, thanks for your help. :)

Frime

Hi!
The trick is not to set the interactive content to visible: false. Instead, you have to set opacity to 0. Then the content remains interactive and everything works as expected.