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

🎯 最終效果：

整個異形區域顏色看起來完全一致；

不會因為區域重疊而變暗；

支持任意復雜遮罩圖形：圓、星、路徑等都可以；

真正達到“只繪制一次顏色”的目的。

? 延伸應用

復雜卡片 UI、氣泡對話框、玻璃模糊區域；

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

異形組件背景、視覺統一主題風格；

🧠 總結

使用 OpacityMask 是 QML 中處理異形遮罩 + 統一色彩透明度的推薦方式。它不僅能解決“顏色疊加變深”的視覺問題，還提供了很強的圖形控制能力。

通過這種方式，你的界面設計會更干凈、更專業，也更具“工業級”質感。