如何在 SwiftUI 中使背景图像变暗，但排除透明模型内的区域？

Question

我有一个 SwiftUI 视图，其中显示背景图像，上面有 iPhone 的模型。该模型有一个透明区域来显示背景图像。我想添加 Color.black.opacity(0.2) 叠加层以使背景图像变暗，以提高内容的可读性。但是，我希望深色叠加层排除模型的透明区域。

我尝试了以下方法：

Color.black.opacity(0.2)
    .ignoresSafeArea()
    .overlay(
        Image(.mockup)
            .resizable()
            .scaledToFit()
            .blendMode(.destinationOut)
)

这种方法似乎没有按预期工作——深色覆盖层在模型的透明区域上仍然可见。

这是上下文的完整代码：

import SwiftUI

struct ContentView: View {
    @State var name: String = ""
    
    var body: some View {
        ZStack {
            Image(.cover)
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
            
            VStack {
                Image(.mockup)
                
                Spacer()
                
                Text("Lucas & Lavínia")
                    .font(.title)
                    .fontWeight(.bold)
                
                Spacer().frame(height: 24)
                
                TextField(
                    "",
                    text: $name,
                    prompt: Text("Nome").foreground(.white)
                )
                .padding(15)
                .background(.white.opacity(0))
                .overlay(
                    RoundedRectangle(
                        cornerRadius: 8
                    )
                    .stroke(
                        .white,
                        lineWidth: 1
                    )
                )
                .clipShape(.rect(cornerRadius: 8))
                .foregroundStyle(.white)
                
                Spacer().frame(height: 24)
                
                Button {
                    
                } label: {
                    HStack {
                        Text("Selecionar fotos da galeria")
                    }
                    .frame(maxWidth: .infinity)
                    .foregroundColor(.white)
                    .padding(.vertical, 15)
                    .background(.red)
                    .cornerRadius(40)
                }
                .frame(maxWidth: .infinity)
                
                Spacer().frame(height: 24)
                
                Button {
                    
                } label: {
                    Text("Capturar foto agora")
                }
                
                Spacer().frame(height: 35)
            }
            .frame(maxWidth: .infinity)
            .foregroundStyle(.white)
            .padding(.all)
            .padding(.top, 25)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
    }
}

#Preview {
    ContentView()
}

如何将黑色叠加仅应用于背景图像中未被模型覆盖的部分？有没有办法掩盖或排除模型透明部分内的区域？或者我需要一种完全不同的方法来实现这种效果吗？

任何指导或代码示例将不胜感激！

Answer 1

该代码向背景图像添加了深色覆盖层，但保持模型的透明区域清晰。方法如下：

1. 叠加和遮罩：Color.black.opacity(0.2) 叠加使背景变暗，但我们对其进行遮罩，以便模型的透明区域不会变暗。
2. 混合模式：模型使用 .blendMode(.destinationOut) 来“剪掉”透明部分中的深色覆盖层。
3. 合成组：组合所有内容以进行正确渲染。 这可以保持模型清晰，同时使背景的其余部分变暗以提高可读性。只要确保模型图像是透明的 PNG 即可！

您可以用您的图像替换矩形。尝试下面的代码：

ZStack {
        // Background Image with Overlay
        Image(".cover")
            .resizable()
            .scaledToFill()
            .ignoresSafeArea()
            .overlay(
                Color.black.opacity(0.2) // Dark overlay
                    .mask(
                        ZStack {
                            Rectangle() // Apply overlay to the entire screen
                                .fill(Color.black)
                            Rectangle() // Exclude mockup area
                                .frame(width: 200, height: 300)
                                .scaledToFit()
                                .blendMode(.destinationOut) // Cut out the transparent area
                        }
                        .compositingGroup()
                    )
            )
...........