Qt Qml实现毛玻璃效果

更新时间：2025年01月02日 09:51:45 作者：梦起丶

毛玻璃效果是一种常见的 UI 设计风格,它通过模糊背景并添加透明度和噪声效果,使界面元素看起来像是半透明的磨砂玻璃,下面我们来看看如何使用Qml实现毛玻璃效果吧

写在前面

毛玻璃效果（Acrylic Effect）是一种常见的 UI 设计风格，它通过模糊背景并添加透明度和噪声效果，使界面元素看起来像是半透明的磨砂玻璃。

本文将介绍如何使用 Qml 实现这种效果，并提供一个完整的示例代码。

1. 效果图

2. 毛玻璃效果的实现原理

毛玻璃效果的核心是通过模糊背景图像，并叠加透明度和噪声效果来实现。

具体来说，实现毛玻璃效果的步骤如下：

捕获背景图像：首先需要捕获背景图像，作为模糊效果的输入。
模糊处理：对捕获的背景图像进行模糊处理，生成模糊效果。
添加亮度和色调：通过叠加一个半透明的矩形，调整模糊区域的亮度和色调。
添加噪声效果：在模糊区域上叠加噪声图像，增加磨砂玻璃的质感。

3. 实现毛玻璃效果

DelAcrylic.qml 文件定义了一个自定义的 Qml 组件，用于实现毛玻璃效果。以下是该文件的主要部分：

ShaderEffectSource: 用于捕获源项（sourceItem）的内容，并将其作为模糊效果的输入。sourceRect 属性定义了捕获的区域。

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

FastBlur: 对 ShaderEffectSource 的内容进行模糊处理。radius 属性控制模糊的强度。

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

Rectangle: 有两个矩形，第一个矩形用于设置背景的亮度（luminosity），第二个矩形用于设置颜色的色调（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: 用于添加噪声效果，噪声图像通过 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 组件并提供了交互式的滑块来控制模糊效果的参数。

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

Window: 定义了一个窗口，宽度为 750，高度为 500，标题为 "Acrylic Test"。

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

Image: 作为背景图像，填充整个窗口。

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

DelAcrylic: 使用 DelAcrylic 组件，将其放置在窗口的中心位置，并绑定背景图像作为模糊效果的源项。opacityNoise、opacityTint 和 radiusBlur 属性分别绑定到三个滑块的值。

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: 包含三个滑块，分别用于控制 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")
        }
    }
}

结语

通过 DelAcrylic.qml 和 main.qml 文件，我们实现了一个具有毛玻璃效果的 Qml 应用程序。DelAcrylic 组件通过模糊背景图像、添加亮度和色调、以及叠加噪声效果，实现了毛玻璃效果。

这种毛玻璃效果可以广泛应用于现代 UI 设计中，特别是在需要模糊背景或实现类似 Acrylic 效果的场景中。通过调整模糊强度、透明度和噪声效果，我们可以创建出丰富多样的视觉效果，提升用户体验。

改进建议：

性能优化：模糊效果可能会对性能产生影响，特别是在高分辨率或复杂场景下。可以考虑优化模糊算法或降低模糊的强度以提高性能。
更多参数控制：可以添加更多的参数控制，例如噪声的类型、模糊的方向等，以提供更丰富的视觉效果。

到此这篇关于Qt Qml实现毛玻璃效果的文章就介绍到这了,更多相关Qt Qml毛玻璃内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

C/C++经典实例之模拟计算器示例代码
最近在看到的一个需求，本以为比较简单，但花了不少时间，所以下面这篇文章主要给大家介绍了关于C/C++经典实例之模拟计算器的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-10-10
详解C++ 左值引用与 const 关键字
这篇文章主要介绍了C++ 左值引用与 const 关键字,左值引用是已定义的变量的别名，其主要用途是用作函数的形参，将 const 关键字用于左值引用时，其在初始化时可接受的赋值形式变得更加广泛了，这里来总结一下，需要的朋友可以参考下
2022-09-09
C++非递归队列实现二叉树的广度优先遍历
这篇文章主要介绍了C++非递归队列实现二叉树的广度优先遍历,实例分析了遍历二叉树相关算法技巧,并附带了两个相关算法实例,需要的朋友可以参考下
2015-07-07
纯C语言:递归二进制转十进制源码分享
这篇文章主要介绍了纯C语言:递归二进制转十进制源码，有需要的朋友可以参考一下
2014-01-01
C++ 中的new 和 delete 运算符及new和malloc的区别解析
在C++中,又引出了一个新玩法:new 和 delete,在C++中,new是用来动态开辟内存的,delete是用来释放我们所动态开辟的内存C++中的new和delete运算符及new和malloc的区别解析,感兴趣的朋友跟随小编一起看看吧
2024-11-11
C语言变量类型与输出控制用法实例教程
这篇文章主要介绍了C语言变量类型与输出控制用法,是C语言程序设计中比较基础也是比较重要的用法,需要的朋友可以参考下
2014-08-08
Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)
这篇文章主要介绍了Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
VS2017中配置QT5.12.0的图文教程
本文主要介绍了VS2017中配置QT5.12.0的图文教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
C语言简明讲解归并排序的应用
这篇文章主要介绍了 c语言排序之归并排序，归并就是把两个或多个序列合并，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
C++栈与队列核心操作及应用场景分析
C++中的栈（Stack）和队列（Queue）是两种常见的线性数据结构,本文介绍C++中的栈（Stack）和队列（Queue）类的基础概念和使用方法,感兴趣的朋友跟随小编一起看看吧
2026-02-02