Sending input events through an OpacityMask



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


  • Moderators

    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");
        }
    }
    


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



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.