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

文章目录

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

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

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

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

🌧️ 传统实现的问题

先来看一个常见的场景：

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

import QtQuick 2.15
import QtGraphicalEffects   1.15
import QtQuick.Window 2.12Window {visible: truewidth: 400height: 300title: qsTr("OpacityMask")Image {anchors.fill: parentsource: "qrc:/image.png"fillMode: Image.PreserveAspectCropmipmap : truesmooth : true}Rectangle {anchors.horizontalCenter: parent.horizontalCentery:          25width:      250height:     150color:      "transparent"//1正常两个矩形叠加，叠加区域能看到阴影Rectangle {id:     rect1y:      25width:  100height: 100color:  "#88000000"}Rectangle {id:     rect2x:      50width:  150height: 150color:  "#88000000"radius: width/2}Rectangle {x:      150y:      25width:  100height: 100color:  "#88000000"}

👉 效果图

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

在这里插入图片描述

🌈 使用 OpacityMask 的理想方案

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

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

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

👉代码如下

Window {visible: truewidth: 400height: 300title: qsTr("OpacityMask")Image {anchors.fill: parentsource: "qrc:/image.png"fillMode: Image.PreserveAspectCropmipmap : truesmooth : true}Rectangle {anchors.horizontalCenter: parent.horizontalCentery:          25width:      250height:     150color:      "transparent"// 颜色源，只绘制一次的颜色块Rectangle {id:             colorSourceanchors.fill:   parentcolor:          "#88000000"visible:        false // 不直接显示，只作为 source 提供颜色}// ⚪ 中间遮罩结构：两个矩形 + 一个圆，构造完整形状Item {id: maskShapewidth: parent.widthheight: parent.heightRectangle {id:     rect1y:      25width:  100height: 100color:  "WHITE"radius:  height/4}Rectangle {id:     rect2x:      50width:  150height: 150color:  "WHITE"radius: width/2}Rectangle {x:      150y:      25width:  100height: 100color:   "WHITE"radius:  height/4}visible: false // 遮罩不直接显示}// 🎭 使用 OpacityMask：统一颜色 + 遮罩形状 => 最终视觉一致OpacityMask {anchors.fill:   parentsource:         colorSourcemaskSource:     maskShapeinvert:         false}}
}