在 QML 中模糊背景

Question

我不知道如何模糊窗口的背景（类似于 CSS 中的 backdrop-filter: blur）。

显然我必须使用名为 ShaderEffect 的东西，但我不知道如何编写着色器。

我找到了以下高斯模糊代码，我认为它是合适的，但我如何将它放入我的项目中？

https://www.shadertoy.com/view/Xltfzj

我想要这样的图片：

Answer 1

这实际上不是一件容易的事情，因为您不希望您的模糊对象成为将被模糊的项目的子项。否则它将试图模糊自己。这里有一些东西可以让你大致了解一下。

Item {
    id: window

    Image {
         id: background
         anchors.fill: parent
         source: "someImg.jpg"
    }

    // This can't be a child of `background`
    Item {
        id: clipRect
        anchors.centerIn: parent
        width: 300
        height: 300
        clip: true

        // We want the blur object to fill the background 
        // but be clipped to its parent
        FastBlur {
            x: -parent.x
            y: -parent.y
            width: background.width
            height: background.height
            source: background
            radius: 64
        }

        // Just to put a border around the blur
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "orange"
            border.width: 2
        }
    }
}

Answer 2

如果你想在 CSS 中对图片进行模糊处理，你需要转到图片或类的样式并进行过滤：blur(radius);

半径是您希望模糊的大小。你必须记住在半径后面加上'px'，例如 filter: blur(8px);

你也可以把它作为rem而不是px。关于您提供的链接的快速说明：它不是 CSS 语言。您不一定需要着色器效果才能工作。

如果您确实想使用着色器，请等待其他人的回复:)