/SwiftUIReverseMask

SwiftUI ReverseMask

Primary LanguageSwift

SwiftUIReverseMask

This is the example how to do reverse mask in SwiftUI

How to Use

at first, create View+Extension

import SwiftUI

extension View {
    
    func reverseMask<Mask: View>(alignment: Alignment = .center,
                                 @ViewBuilder _ mask: () -> Mask) -> some View {
        self.mask {
            Rectangle()
                .overlay(alignment: alignment) {
                    mask()
                        .blendMode(.destinationOut)
                }
        }
    }
}

then, use it like doing mask modifier.

struct ContentView: View {
    var body: some View {
            
            Image("img_mask")
                .resizable()
                .frame(width: 300, height: 300)
                .reverseMask {
                    Image(systemName: "applelogo")
                        .font(.system(size: 100))
                }
    }
}

Preview

swiftui-reverse-mask-5

Article

【SwiftUI】 リバースマスクを実装し、Viewを切り抜く方法