SwiftUI inverted mask

Question

I'm trying to create an view like in the screenshot with swiftui. The top frame should be light, other places should be dark. SwiftUI add inverted mask I tried to change it over the codes here, but I couldn't. how can i do it?

where I've come so far : black color not show full screen and mask not working

func HoleShapeMask(in rect: CGRect) -> Path {
    return
        Path { path in
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
    }

}

struct ContentView: View {
    @State var rect :CGRect = .zero

    var body: some View {

        GeometryReader{g in
            Text("deneme")
                .foregroundColor(.blue)
                .frame(width: 124, height: 100, alignment: .center)
                .background(Color.red)
                .overlay(
                    GeometryReader { gp in
                        Color.clear.opacity(0.00001)
                            .onAppear(){
                                rect = gp.frame(in: .named("deneme"))
                            }
                    }
                )
        }
        .coordinateSpace(name: "deneme")
        .overlay(
            Rectangle()
                .fill(Color.black.opacity(0.8))
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
                .mask(HoleShapeMask(in: rect).fill(style: FillStyle(eoFill: true)))
        )
    }
}

my code screenshot :

i want to this screen :

You should show your existing code and your attempt and people can look for where things went awry. Otherwise, there's no reason that a new answer will be any different than the answer you already linked to, which you say doesn't work for you. — jnpdx, Sep 07 '21 at 00:53

SwiftUI inverted mask

0 Answers0