在 QML/Qt 中模糊部分背景图像

Posted 2023-02-16

【中文标题】在 QML/Qt 中模糊部分背景图像

【英文标题】：Blur part of background image in QML/Qt

【发布时间】：2020-04-08 22:31:05

【问题描述】：

我对 QML/Qt 还很陌生。基本上我想知道如何对下面照片上看到的白色矩形的 inside 应用模糊处理，并且只对内部应用模糊处理，以便模糊矩形内的背景图像部分。我尝试在一个普通的 Qt 项目中这样做，但认为不使用 QML 是不可能的。

【参考方案1】：

这是可能的。使用ShaderEffectSource项目：

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 属性可以指定要模糊的区域。

调整源图像大小时存在一些问题。此示例仅适用于静态示例。

【讨论】：

感谢您的回复！确实认为无论如何可以在不使用 QML 的情况下在 qt 中实现相同的效果。只是标准的 qt 小部件和图形效果？

@aman 模糊图像本身在 Qt 中是可能的。您可以查看此示例 doc.qt.io/qt-5/qtwidgets-effects-blurpicker-example.html 。但是，我不确定如何实现您需要的确切行为