Blur part of background image in QML/Qt

Question

I'm fairly new to QML/Qt. Basically I would like to know how to apply a blur to the inside of the white rectangle seen on the photo below and only the inside so that it blurs the part of the background image within the rectangle. I tried doing this in a normal Qt project but don't think its possible without using QML.

user3417815 user3417815 · Accepted Answer · 2020-04-10T07:04:03

It's possible. Use ShaderEffectSource item:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import "qrc:/"

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Image {
        id: bug
        anchors.fill: parent
        width: 32
        height: 32
        source: "qrc:/Original_bug.png"
        ShaderEffectSource{
            id: shader
            sourceItem: bug
            width: 128
            height: 128
            anchors{
                right: parent.right
                rightMargin: 32
                verticalCenter: parent.verticalCenter
            }
            sourceRect: Qt.rect(x,y, width, height)
        }
        GaussianBlur {
            anchors.fill: shader
            source: shader
            radius: 8
            samples: 4
        }
    }
}

Using sourceRect property you can specify an area to be blurred.

There are some issues when resizing the source image. This example works good only for static one.

Blur part of background image in QML/Qt

1 Answers