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?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved General and Desktop
qmlgraphics scene
4 Posts 2 Posters 4.7k 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