Qml 半透明模糊叠加矩形

Posted 2023-02-16

【中文标题】Qml 半透明模糊叠加矩形

【英文标题】：Qml semi transparent blur overlay rectangle

【发布时间】：2021-08-20 11:58:57

【问题描述】：

我正在尝试创建一个半透明的模糊矩形，它覆盖在 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
    

我在运行时看到一个黑色矩形。 我应该如何创建一个半透明的模糊覆盖矩形/项目。

【参考方案1】：

这是我过去在不使用图层或手动使用 ShaderEffectSource 对象的情况下的做法：

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
    

【讨论】：

我没有使用图像，我想要一个矩形作为模糊半透明覆盖层，它会使它后面的任何东西看起来模糊，它可以是任何 qml 组件。

图像只是让你有一些模糊的东西。用你喜欢的任何东西替换它。把 blurRect 放在上面，你应该会看到它是模糊的。

有什么方法可以避免引用我们希望看到的模糊的东西。所以这个东西可以是任何组件。并且覆盖将独立于它使其模糊的组件的知识。就像 x 对象顶部的模糊玻璃一样。

@User7723337，你可以让 FastBlur 的源指向根窗口，这样它就可以覆盖应用程序的任何部分。但它总是需要引用 something 以便知道它应该模糊什么。

【参考方案2】：

看看这段代码：

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
                
        


    

输出：

模糊矩形之前：

模糊矩形后：

如果我在背景中使用图像，您可以更好地看到模糊矩形：

    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
        
    

【讨论】：

docs 只是说layer.effect 需要一个组件。所以如果你做layer.effect: blur，那么blur是什么？当我尝试它时它不起作用。它说“ReferenceError：未定义模糊”。

@JarMan，你的 QT 是什么版本？

你能指出讨论这个的文档吗？

@JarMan 你的权利，我删除那个，没有那个，这个代码是半透明的，因为不透明度：0.5，this doc 它接受任何组件

我编辑它，他应该把 ShaderEffect 放在 Rectangle 的 layer.effect 中，现在模糊是工作 @JarMan 测试这个