SwiftUI, add inverted Opacity

Question

Please see the attach image below, I want to the make this view in siwftUI that have zero opacity inside.

struct TestView: View {
    var body: some View {
        ZStack{

//            any dummy image
            Image("bigpancake")
                .resizable()

            ZStack {
                
//                Make this view opcity zero so that I can see backgourd clearly
                Rectangle()
                    .frame(width: 200, height: 100)
                    .foregroundColor(.black.opacity(0))

                
                Rectangle()
                .foregroundColor(.black.opacity(0.3))
                
            }
            
        }
    }
    
}

This sounds more like a code request than a request for help troubleshooting, what have you tried? What are you having issues with? — lorem ipsum, Nov 28 '22 at 14:39
Does this answer your question? [SwiftUI add inverted mask](https://stackoverflow.com/questions/59656117/swiftui-add-inverted-mask) — burnsi, Nov 28 '22 at 15:12
@loremipsum its not a coding request I have shared what I have done, I have set the opacity 0 to rectangle but is getting background opacity. — Qazi Ammar, Nov 28 '22 at 17:12

bjorn.lau · Accepted Answer · 2022-11-28T15:11:21.523

If I understand correctly what you are looking for, it sounds like an "inverted mask". You can achieve what you want using compositingGroup()

Example:

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()
            ZStack {
                Rectangle()
                    .foregroundColor(.black.opacity(0.3))
                    .ignoresSafeArea()

                Rectangle()
                    .cornerRadius(20)
                    .frame(width: 200, height: 200)
                    .blendMode(.destinationOut)
                    .overlay {
                        Text("Content")
                    }
            }.compositingGroup()
        }
    }
}

SwiftUI, add inverted Opacity

1 Answers1