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

news2025/4/15 22:38:22

文章目录

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

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

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

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

🌧️ 传统实现的问题

先来看一个常见的场景：

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

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 把颜色源“裁剪”成异形结构。

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

👉代码如下

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
        }
    }
}