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 -
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 } } }