1

I am trying to create a semi transparent blur rectangle which is overlay on another rectangle in Qt Quick Qml.

Rectangle {
    id: mainRect
    anchors.fill: parent
    color: "transparent"

    // This is my background rect 
    Rectangle {
        id: backgroundRect
        anchors.fill: parent
        color: "blue"
    }

    // This is my semi-transparent-blur overlay rect  
    Rectangle {
        id: blurRect
        anchors.fill: parent
        color: "#000000"
        opacity: 0.5
    }
    
    // I did try these but I see black rectangle
    ShaderEffectSource {
        id: effectSource
        sourceItem: blurRect
        anchors.fill: blurRect
    }

    FastBlur{
        id: blur
        anchors.fill: effectSource
        source: effectSource
        radius: 32
    }
}

I see an black rectangle when I run this.
How should I create a semi transparent blur overlay Rectangle/Item.

User7723337
  • 11,857
  • 27
  • 101
  • 182

2 Answers2

2

Here is how I have done it in the past without layers or manually using ShaderEffectSource objects:

Image {
    id: backgroundImage
    source: "some_image.png"
}

Item {
    id: blurRect
    anchors.fill: parent
    
    FastBlur {
        anchors.fill: parent
        source: backgroundImage
        radius: 64
    }

    Rectangle {
        anchors.fill: parent
        color: "red"
        opacity: 0.5
    }
}
JarMan
  • 7,589
  • 1
  • 10
  • 25
  • I am not using image, I want to have a rectangle as blur semi transparent overlay which will make anything that is behind it look blur, ether it can be any qml component. – User7723337 Aug 20 '21 at 16:50
  • The image is just so you have something to blur. Replace that with whatever you like. Put blurRect on top and you should see it blurred. – JarMan Aug 20 '21 at 16:52
  • Is there a way we can avoid giving reference to thing we want to see as blur. So the thing can be anything any component. And the overlay will be independent of the knowledge of the component it is making it blur. Just like blur glass on top of x object. – User7723337 Aug 20 '21 at 16:56
  • @User7723337, you could make FastBlur's source point to the root window so it can cover any part of the app. But it will always need to reference *something* so it knows what it should blur. – JarMan Aug 20 '21 at 17:07
1

Look at this code:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
           id: backgroundRect
           anchors.fill: parent
           color: "blue"
       }


    Rectangle
    {
        id:blureRect
        anchors.fill: parent
        layer.smooth: true
        layer.enabled: true
        opacity: 0.5

        layer.effect: ShaderEffect {
            id: effectSource
            anchors.fill: parent

            FastBlur{
                    id: blur
                    anchors.fill: effectSource
                    source: effectSource
                    radius: 32
                }
        }


    }

}

output:

before blur rect :

enter image description here

after blur rect :

enter image description here

If I use an image in the background you can see blur rect better :

    Image {
    id: img
    anchors.fill: parent
    source: "/images/monkey_off_128x128.png"
    sourceSize: Qt.size(parent.width, parent.height)
    smooth: true

}


Rectangle
{
    id:blureRect
    anchors.fill: parent
    layer.smooth: true
    layer.enabled: true
    opacity: 0.5

    layer.effect: ShaderEffect {
        id: effectSource
        anchors.fill: parent

        FastBlur{
            id: blur
            anchors.fill: effectSource
            source: effectSource
            radius: 32
        }
    }


}

enter image description here

Parisa.H.R
  • 3,303
  • 3
  • 19
  • 38
  • The [docs](https://doc.qt.io/qt-5/qml-qtquick-item.html#layer.effect-prop) just say `layer.effect` takes a Component. So if you do `layer.effect: blur`, what is `blur`? It doesn't work when I try it. It says "ReferenceError: blur is not defined". – JarMan Aug 20 '21 at 15:11
  • @JarMan , what is version of your QT? – Parisa.H.R Aug 20 '21 at 15:12
  • Can you point to docs that talk about this? – JarMan Aug 20 '21 at 15:14
  • @JarMan your right , I remove that , without that and this code this Rect is semi transparent becouse of opacity: 0.5 , [this doc](https://doc.qt.io/qt-5/qml-qtquick-item.html#layer.effect-prop) it accepts any component – Parisa.H.R Aug 20 '21 at 15:32
  • I Edit it , He should put ShaderEffect in layer.effect of Rectangle , now blur is work @JarMan Test this – Parisa.H.R Aug 20 '21 at 15:45
  • It still did not show a blur for me when I tried your code. – JarMan Aug 20 '21 at 15:58