Qt?Qml實(shí)現(xiàn)毛玻璃效果

更新時(shí)間：2025年01月02日 09:51:45 作者：夢(mèng)起丶

毛玻璃效果是一種常見(jiàn)的?UI?設(shè)計(jì)風(fēng)格,它通過(guò)模糊背景并添加透明度和噪聲效果,使界面元素看起來(lái)像是半透明的磨砂玻璃,下面我們來(lái)看看如何使用Qml實(shí)現(xiàn)毛玻璃效果吧

寫(xiě)在前面

毛玻璃效果（Acrylic Effect）是一種常見(jiàn)的 UI 設(shè)計(jì)風(fēng)格，它通過(guò)模糊背景并添加透明度和噪聲效果，使界面元素看起來(lái)像是半透明的磨砂玻璃。

本文將介紹如何使用 Qml 實(shí)現(xiàn)這種效果，并提供一個(gè)完整的示例代碼。

1. 效果圖

2. 毛玻璃效果的實(shí)現(xiàn)原理

毛玻璃效果的核心是通過(guò)模糊背景圖像，并疊加透明度和噪聲效果來(lái)實(shí)現(xiàn)。

具體來(lái)說(shuō)，實(shí)現(xiàn)毛玻璃效果的步驟如下：

捕獲背景圖像：首先需要捕獲背景圖像，作為模糊效果的輸入。
模糊處理：對(duì)捕獲的背景圖像進(jìn)行模糊處理，生成模糊效果。
添加亮度和色調(diào)：通過(guò)疊加一個(gè)半透明的矩形，調(diào)整模糊區(qū)域的亮度和色調(diào)。
添加噪聲效果：在模糊區(qū)域上疊加噪聲圖像，增加磨砂玻璃的質(zhì)感。

3. 實(shí)現(xiàn)毛玻璃效果

DelAcrylic.qml 文件定義了一個(gè)自定義的 Qml 組件，用于實(shí)現(xiàn)毛玻璃效果。以下是該文件的主要部分：

ShaderEffectSource: 用于捕獲源項(xiàng)（sourceItem）的內(nèi)容，并將其作為模糊效果的輸入。sourceRect 屬性定義了捕獲的區(qū)域。

ShaderEffectSource {
    id: __source
    anchors.fill: parent
    visible: false
    sourceRect: Qt.rect(control.x, control.y, control.width, control.height)
}

FastBlur: 對(duì) ShaderEffectSource 的內(nèi)容進(jìn)行模糊處理。radius 屬性控制模糊的強(qiáng)度。

FastBlur {
    id: __fastBlur
    anchors.fill: parent
    source: __source
    radius: 32
}

Rectangle: 有兩個(gè)矩形，第一個(gè)矩形用于設(shè)置背景的亮度（luminosity），第二個(gè)矩形用于設(shè)置顏色的色調(diào)（colorTint）和透明度（opacityTint）。

Rectangle {
    anchors.fill: parent
    color: Qt.rgba(1, 1, 1, luminosity)
    radius: control.radiusBg
}

Rectangle {
    anchors.fill: parent
    color: Qt.rgba(colorTint.r, colorTint.g, colorTint.b, opacityTint)
    radius: control.radiusBg
}

Image: 用于添加噪聲效果，噪聲圖像通過(guò) base64 編碼嵌入到 Qml 文件中。opacity 屬性控制噪聲的透明度。

Image {
    id: __noiseImage
    anchors.fill: parent
    source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAGHaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49J++7vycgaWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc/Pg0KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyI+PHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj48cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0idXVpZDpmYWY1YmRkNS1iYTNkLTExZGEtYWQzMS1kMzNkNzUxODJmMWIiIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj48dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPjwvcmRmOkRlc2NyaXB0aW9uPjwvcmRmOlJERj48L3g6eG1wbWV0YT4NCjw/eHBhY2tldCBlbmQ9J3cnPz4slJgLAAAMNElEQVRYR02XW1NTd9vGf0nYZEFMVha7JBAIYYihEQVSUQQVtOrUtipVsTPtTOs38KDtUQ+Y6ZfoTI88aT3o2Jk6bUfa4QFEKZWIsgm7ECKQHZu1FpiQQAx5DnyfzHv6n//Jvbl+13Vrvv/++5zRaOSPP/7giy++wGQyMTw8TCgUoquri2QySSgUorm5mcbGRh4/fozT6cTtdvPgwQMMBgPnzp0DYHR0FEmSiEag=="
    fillMode: Image.Tile
    opacity: 0.02
}

4. 如何使用

main.qml 是示例文件，使用 DelAcrylic 組件并提供了交互式的滑塊來(lái)控制模糊效果的參數(shù)。

以下是該文件的主要部分：

Window: 定義了一個(gè)窗口，寬度為 750，高度為 500，標(biāo)題為 "Acrylic Test"。

Window {
    width: 750
    height: 500
    visible: true
    title: qsTr("Acrylic Test")
}

Image: 作為背景圖像，填充整個(gè)窗口。

Image {
    id: bg
    anchors.fill: parent
    source: "qrc:/img.jpg"
}

DelAcrylic: 使用 DelAcrylic 組件，將其放置在窗口的中心位置，并綁定背景圖像作為模糊效果的源項(xiàng)。opacityNoise、opacityTint 和 radiusBlur 屬性分別綁定到三個(gè)滑塊的值。

DelAcrylic {
    id: acrylic
    x: (bg.width - width) * 0.5
    y: (bg.height - height) * 0.5
    width: 300
    height: 300
    sourceItem: bg
    opacityNoise: slider1.value
    opacityTint: slider2.value
    radiusBlur: slider3.value

    MouseArea {
        anchors.fill: parent
        drag.target: parent
    }
}

Column: 包含三個(gè)滑塊，分別用于控制 opacityNoise、opacityTint 和 radiusBlur 屬性。

Column {
    Slider {
        id: slider1
        anchors.horizontalCenter: parent.horizontalCenter
        from: 0
        to: 1
        stepSize: 0.01
        value: 0.02
        ToolTip.visible: hovered
        ToolTip.text: value.toFixed(2)

        Text {
            anchors.left: parent.right
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("opacityNoise")
        }
    }

    Slider {
        id: slider2
        anchors.horizontalCenter: parent.horizontalCenter
        from: 0
        to: 1
        stepSize: 0.01
        value: 0
        ToolTip.visible: hovered
        ToolTip.text: value.toFixed(2)

        Text {
            anchors.left: parent.right
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("opacityTint")
        }
    }

    Slider {
        id: slider3
        from: 0
        to: 100
        value: 48
        ToolTip.visible: hovered
        ToolTip.text: value.toFixed(0)

        Text {
            anchors.left: parent.right
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("radiusBlur")
        }
    }
}

結(jié)語(yǔ)

通過(guò) DelAcrylic.qml 和 main.qml 文件，我們實(shí)現(xiàn)了一個(gè)具有毛玻璃效果的 Qml 應(yīng)用程序。DelAcrylic 組件通過(guò)模糊背景圖像、添加亮度和色調(diào)、以及疊加噪聲效果，實(shí)現(xiàn)了毛玻璃效果。

這種毛玻璃效果可以廣泛應(yīng)用于現(xiàn)代 UI 設(shè)計(jì)中，特別是在需要模糊背景或?qū)崿F(xiàn)類似 Acrylic 效果的場(chǎng)景中。通過(guò)調(diào)整模糊強(qiáng)度、透明度和噪聲效果，我們可以創(chuàng)建出豐富多樣的視覺(jué)效果，提升用戶體驗(yàn)。

改進(jìn)建議：

性能優(yōu)化：模糊效果可能會(huì)對(duì)性能產(chǎn)生影響，特別是在高分辨率或復(fù)雜場(chǎng)景下。可以考慮優(yōu)化模糊算法或降低模糊的強(qiáng)度以提高性能。
更多參數(shù)控制：可以添加更多的參數(shù)控制，例如噪聲的類型、模糊的方向等，以提供更豐富的視覺(jué)效果。

到此這篇關(guān)于Qt Qml實(shí)現(xiàn)毛玻璃效果的文章就介紹到這了,更多相關(guān)Qt Qml毛玻璃內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: