[Solved] How to dynamic setting Glow effect with item



  • I want to apply Glow effect to text when click. Here is my code:
    @
    import QtQuick 2.0
    import QtGraphicalEffects 1.0

    Rectangle {
    width: 200; height: 200
    color: "black"

    Text {
        id: text
        anchors.centerIn: parent
        text: "Hello Qt!"
        font.pixelSize: 30
        color: "white"
    }/* : Work but not my expectation
    Glow {
        anchors.fill: text
        source: text
        color: "red"
        radius: 10
        samples: 20
        visible: true
    
        NumberAnimation on spread {
            from: 0; to: 0.8; duration: 1000
            loops: NumberAnimation.Infinite
            easing.type: Easing.InOutQuad
        }
    }*/
    
    Loader {
        id: loader
        focus: true
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Clicked")
            loader.sourceComponent = glowEffect
        }
    }
    
    Component {
        id: glowEffect
        Glow {
            anchors.fill: parent
            source: parent
            color: "red"
            radius: 10
            samples: 20
            visible: true
    
            NumberAnimation on spread {
                from: 0; to: 0.8; duration: 1000
                loops: NumberAnimation.Infinite
                easing.type: Easing.InOutQuad
            }
        }
    }
    

    }
    @

    No effect. Maybe glow.source is incorrect, but how to set the source with "text" ?

    Thanks in advance:)



  • @
    //            anchors.fill: parent
                x: text.x; y: text.y  
                width: text.width; height: text.height
                source: text
    @


Log in to reply
 

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