异形遮罩之QML中的 `OpacityMask` 实战

文章目录

[🌧️ 传统实现的问题](#🌧️ 传统实现的问题)
- [👉 效果图](#👉 效果图)
[🌈 使用 OpacityMask 的理想方案](#🌈 使用 OpacityMask 的理想方案)
- 👉代码如下
- [🎯 最终效果：](#🎯 最终效果：)
[✨ 延伸应用](#✨ 延伸应用)
[🧠 总结](#🧠 总结)

在 UI 设计中，经常希望实现一些"异形区域"拥有统一透明度或颜色的效果，比如多个图形重叠形成一个复杂形状，同时其背景色看起来是统一透明的。

但如果你直接将多个带透明度的图形叠加使用，就会出现一个问题：重叠区域颜色会叠加变深，显得非常不自然。

本文将结合一个具体的 QML 案例，演示如何使用 OpacityMask 遮罩技术，让多个图形在视觉上拥有"统一背景透明度"的效果，告别颜色叠加阴影！

🌧️ 传统实现的问题

先来看一个常见的场景：

我们想绘制两个矩形 + 一个圆形，颜色统一为半透明黑（#88000000）。使用最直观的方式叠加：

javascript 复制代码

import QtQuick 2.15
import QtGraphicalEffects   1.15
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 300
    title: qsTr("OpacityMask")

    Image {
        anchors.fill: parent
        source: "qrc:/image.png"
        fillMode: Image.PreserveAspectCrop
        mipmap : true
        smooth : true
    }

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        y:          25
        width:      250
        height:     150
        color:      "transparent"
       //1正常两个矩形叠加，叠加区域能看到阴影
       Rectangle {
           id:     rect1
           y:      25
           width:  100
           height: 100
           color:  "#88000000"
       }
       Rectangle {
           id:     rect2
           x:      50
           width:  150
           height: 150
           color:  "#88000000"
           radius: width/2
       }
       Rectangle {
           x:      150
           y:      25
           width:  100
           height: 100
           color:  "#88000000"
       }

👉 效果图

中间区域变暗了！这正是由于多个带透明度的图形叠加，alpha 通道和 RGB 都发生了混合，导致颜色发黑发沉。

🌈 使用 OpacityMask 的理想方案

为了实现真正"统一透明度"的视觉效果，核心做法是：

把所有的异形结构作为一个遮罩层；把颜色块作为一个单一绘制源；最后用 OpacityMask 把颜色源"裁剪"成异形结构。

这样，颜色只绘制一次，重叠区域也不会颜色叠加。

👉代码如下

javascript 复制代码

Window {
    visible: true
    width: 400
    height: 300
    title: qsTr("OpacityMask")

    Image {
        anchors.fill: parent
        source: "qrc:/image.png"
        fillMode: Image.PreserveAspectCrop
        mipmap : true
        smooth : true
    }

    Rectangle {

        anchors.horizontalCenter: parent.horizontalCenter
        y:          25
        width:      250
        height:     150
        color:      "transparent"

        // 颜色源，只绘制一次的颜色块
        Rectangle {
            id:             colorSource
            anchors.fill:   parent
            color:          "#88000000"
            visible:        false // 不直接显示，只作为 source 提供颜色
        }

        // ⚪ 中间遮罩结构：两个矩形 + 一个圆，构造完整形状
        Item {
            id: maskShape
            width: parent.width
            height: parent.height
            Rectangle {
                id:     rect1
                y:      25
                width:  100
                height: 100
                color:  "WHITE"
                radius:  height/4
            }
            Rectangle {
                id:     rect2
                x:      50
                width:  150
                height: 150
                color:  "WHITE"
                radius: width/2
            }
            Rectangle {
                x:      150
                y:      25
                width:  100
                height: 100
                color:   "WHITE"
                radius:  height/4

            }
            visible: false // 遮罩不直接显示
        }

        // 🎭 使用 OpacityMask：统一颜色 + 遮罩形状 => 最终视觉一致
        OpacityMask {
            anchors.fill:   parent
            source:         colorSource
            maskSource:     maskShape
            invert:         false
        }
    }
}

🎯 最终效果：

整个异形区域颜色看起来完全一致；

不会因为区域重叠而变暗；

支持任意复杂遮罩图形：圆、星、路径等都可以；

真正达到"只绘制一次颜色"的目的。

✨ 延伸应用

复杂卡片 UI、气泡对话框、玻璃模糊区域；

某些需要 alpha 模板控制的游戏 HUD；

异形组件背景、视觉统一主题风格；

🧠 总结

使用 OpacityMask 是 QML 中处理异形遮罩 + 统一色彩透明度的推荐方式。它不仅能解决"颜色叠加变深"的视觉问题，还提供了很强的图形控制能力。

通过这种方式，你的界面设计会更干净、更专业，也更具"工业级"质感。