Размытие части фонового изображения в QML / Qt

Question

Я довольно новичок в QML / Qt. В основном я хотел бы знать, как применить размытие к внутри белого прямоугольника, показанного на фотографии ниже, и только к внутренней части, чтобы оно размыло часть фонового изображения внутри прямоугольника. Я пытался сделать это в обычном проекте Qt, но не думаю, что это возможно без использования QML.

Answer 1

Это возможно. Используйте 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
        }
    }
}

Используя свойство sourceRect, вы можете указать область для размытия.

Есть некоторые проблемы при изменении размера исходного изображения. Этот пример хорошо работает только для stati c one.