QML图形效果之遮罩效果（OpacityMask、ThresholdMask）

最新推荐文章于 2025-08-04 16:55:54 发布

Quz

最新推荐文章于 2025-08-04 16:55:54 发布

阅读量696

点赞数 19

CC 4.0 BY-SA版权

分类专栏： Qt6 QML学习之路文章标签： qt

本文链接：https://blog.youkuaiyun.com/u011186532/article/details/149746985

Qt6 QML学习之路专栏收录该内容

109 篇文章

订阅专栏

引言

Qt5Compat.GraphicalEffects模块提供了丰富的图形效果组件，其中遮罩效果（Mask Effects）是最常用的效果之一。本文将重点介绍两种主要的遮罩效果：OpacityMask（透明度遮罩）和ThresholdMask（阈值遮罩），通过代码示例来展示它们的使用方法和区别。

最终效果

在这里插入图片描述

基础概念

遮罩效果概述

遮罩效果是一种通过控制源图像的透明度来创建特殊视觉效果的技术。在QML中，遮罩效果使用一个遮罩图像来决定源图像的哪些部分应该显示，哪些部分应该隐藏。

OpacityMask（透明度遮罩）

OpacityMask是最基础的遮罩效果，它使用遮罩图像的alpha通道来控制源图像的透明度。遮罩图像中较亮的区域会使源图像更不透明，较暗的区域会使源图像更透明。

主要特性：

直接使用遮罩图像的alpha通道
遮罩图像的亮度决定源图像的透明度
适用于需要精确控制透明度的场景

ThresholdMask（阈值遮罩）

ThresholdMask是OpacityMask的增强版本，它提供了更精细的控制机制。通过设置阈值（threshold）和扩散值（spread），可以创建更复杂的遮罩效果。

主要特性：

通过阈值参数控制遮罩的敏感度
通过扩散参数控制过渡区域的平滑度
提供更灵活的遮罩控制选项

两种遮罩的区别

特性	OpacityMask	ThresholdMask
控制精度	直接使用alpha通道	通过阈值和扩散控制
参数复杂度	简单，无需额外参数	需要设置threshold和spread
适用场景	基础遮罩效果	需要精细控制的复杂效果
性能	较高	相对较低（需要额外计算）

完整示例分析

代码实现

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Item {
    Flow {
        anchors.fill: parent
        spacing: 10
        padding: 10

        // OpacityMask示例
        Rectangle {
            width: 280
            height: 280
            color: "white"

            Image {
                id: butterfly
                source: "qrc:/images/butterfly.png"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            Image {
                id: mask
                source: "qrc:/images/fog.png"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            OpacityMask {
                anchors.fill: butterfly
                source: butterfly
                maskSource: mask
            }
        }

        // ThresholdMask示例
        Rectangle {
            width: 280
            height: 280
            color: "white"

            Image {
                id: butterfly2
                source: "qrc:/images/butterfly.png"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            Image {
                id: mask2
                source: "qrc:/images/fog.png"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            ThresholdMask {
                anchors.fill: butterfly2
                source: butterfly2
                maskSource: mask2
                threshold: 0.4
                spread: 0.2
            }
        }
    }
}