NEW: Start my new Ultimate Portfolio App course with a free Hacking with Swift+ trial! >>

Making an inverted mask?

Forums > SwiftUI

Hi!

I'm trying to make an inverted mask in my application. That is, I want to grey out the area outside the path instead of inside (you'll hopefully see what i mean in the code). I've tried finding this answer on my own (it's how i found the "oeFill" solution below), but so far the solutions I've tried hasn't worked. Does anyone have any suggestions?

Relevant code in my view:

struct MyView: View {
    var body: some View {
        VStack(alignment:.leading,spacing: 0){
            HStack(){
                Image(systemName: "camera.fill").style(.valueLarge)
                    .frame(minWidth: 0, idealWidth: 200, maxWidth: 200, minHeight: 0, idealHeight: 200, maxHeight: .infinity, alignment: .center)
                    .background(Color.gray)
                    .overlay(Rectangle()
                        .fill(ColorManager.black)
                        .opacity(0.5)
                        .frame(width: 200, height: 200)
                        .mask(CameraOverlayMask().fill(style: FillStyle(eoFill: true))))
            }
        }
    }
}

Code in CameraOverlayMask:

struct CameraOverlayMask : Shape {
    func path (in rect: CGRect) -> Path {
        var path = Path()

        path.addArc(center: CGPoint(x:0.8*rect.maxX, y: 0.8*rect.maxY),radius: rect.width/16, startAngle: .degrees(0), endAngle: .degrees(90), clockwise: false)
        path.addArc(center: CGPoint(x:0.2*rect.maxX, y: 0.8*rect.maxY),radius: rect.width/16, startAngle: .degrees(90), endAngle: .degrees(180), clockwise: false)
        path.addArc(center: CGPoint(x:0.2*rect.maxX, y: 0.2*rect.maxY),radius: rect.width/16, startAngle: .degrees(180), endAngle: .degrees(270), clockwise: false)
        path.addArc(center: CGPoint(x:0.8*rect.maxX, y: 0.2*rect.maxY),radius: rect.width/16, startAngle: .degrees(270), endAngle: .degrees(360), clockwise: false)

        return path
    }
}

   

Hacking with Swift is sponsored by Stream

SPONSORED Check out Stream's cross-platform open source chat SDK on GitHub! Write once and deploy your app with fully featured chat UI on iOS and macOS.

Go to GitHub

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.