Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to realize the graphical effect of frosted glass with QML?

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

Scheduled Pinned Locked Moved General and Desktop
qmlgraphics scene
4 Posts 2 Posters 5.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    DidaHarp
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • D Offline
      D Offline
      DidaHarp
      wrote on last edited by
      #2

      Can anyone help?

      S 1 Reply Last reply
      0
      • D DidaHarp

        Can anyone help?

        S Offline
        S Offline
        stan.m
        wrote on last edited by
        #3

        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
                }
            }
        }
        
        D 1 Reply Last reply
        3
        • S stan.m

          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
                  }
              }
          }
          
          D Offline
          D Offline
          DidaHarp
          wrote on last edited by
          #4

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

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved