在 QML 中模糊背景

Question

我不知道如何模糊窗口的背景（類似於backdrop-filter: blur 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 中模糊圖片，則需要轉到圖像或類的樣式並執行 filter: blur(radius);

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

你也可以把它作為 rem 而不是 px。 關於您提供的鏈接的快速說明：它不在 CSS 語言中。 您不一定需要着色器效果才能工作。

如果您確實想使用着色器，請等待其他人的回復:)