Fading to transparent gradient



  • Hi, I'm trying to create a dynamic item which edges are fading to transparent same like here https://www.getpaint.net/doc/latest/GradientTool.html (linear gradient example) alt text
    I've tried with opacityMask and LinearGradient but in LinearGradient I had to use specific color. At that example https://stackoverflow.com/a/48472948 it looks good as background is white, but in my case background doesnt have solid color.
    Do you have any ideas how that can be done?



  • I think you want the result like this:
    0_1559793387953_微信截图_20190606115408.png

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtGraphicalEffects 1.0
    
    Window {
        visible: true
        width: 500
        height: 500
        title: qsTr("Hello World")
    
        Image {
            source: "back.jpg"
        }
    
        Image {
            id: image
            anchors.centerIn: parent
            source: "image.jpg"
            visible: false
        }
    
        LinearGradient {
            id: mask
            anchors.fill: image
            start: Qt.point(0, 0)
            end: Qt.point(image.width, 0)
            gradient: Gradient {
                GradientStop { position: 0.2; color: "transparent" }
                GradientStop { position: 0.5; color: "white" }
                GradientStop { position: 0.8; color: "transparent" }
            }
            visible: false
        }
    
        OpacityMask {
            anchors.fill: image
            source: image
            maskSource: mask
        }
    }
    


  • @Jacob.zhang That works, so visiblity do the trick. Thanks.