How to realize the graphical effect of frosted glass with QML?



  • There is a need to realize the graphical effect of frosted glass , like ios7,or just as the following picture shows:
    Click to see the picture



  • Can anyone help?



  • Here you go: Frosted Glass effect! I made this Qt5.4, but should work with older Qt5 releases.

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtGraphicalEffects 1.0
    
    ApplicationWindow {
        title: qsTr("Frosted Glass Effect")
        width: 640; height: 480
        visible: true
    
        Image {
            id: image
            source: "qrc:/6949981-autumn-forest-glade.jpg"
            anchors.fill: parent
            fillMode: Image.Stretch
        }
    
        Item {
            id: glass
            x: .3*image.width; y:.4*image.height
            width: .6 * image.width; height: .5 * image.height
            clip: true
    
            FastBlur {
                id: blur
                source: image
                x: -glass.x; y: -glass.y
                width: image.width; height: image.height
                radius: 40
            }
            ColorOverlay {
                anchors.fill: blur
                source: blur
                color: "#40FFFFFF"
            }
            Text {
                text: "<b>Frosted<br>Glass</b>"
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: .2 * Math.min(glass.width, glass.height)
                anchors.centerIn: parent
            }
        }
    }


  • @stan.m That's awesome! That satisfies! You are just cool!


Log in to reply
 

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