swiftUI moon shape

Question

I would like to create moon shape. Currently, I archived it by placing another circle on top and then giving it the same colour as the background colour.

Perhaps using a clipped shape or masking layer.

I was wondering if there's a better way to do this?

ZStack{

Circle().foregroundColor(isDarkMode ? Color( colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)) : Color.yellow)

.frame(width: 30, height: 30)

.offset(x: isDarkMode ? 20 : -20)

Circle().foregroundColor(isDarkMode ? Color( colorLiteral(red: 0.1764705926, green: 0.4980392158, blue: 0.7568627596, alpha: 1)) : Color.white)

.frame(width: 30, height: 30)

.offset(x: isDarkMode ? 6 : -20).rotationEffect(.degrees( isDarkMode ? -40 : 0))

}

This topic gives several approaches https://stackoverflow.com/questions/59656117/swiftui-add-inverted-mask — Asperi, Oct 17 '20 at 13:20

score 3 · Answer 1 · answered Oct 17 '20 at 14:00

Here is a demo of possible approach. Tested with Xcode 12 / iOS 14.

struct MoonMask: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Rectangle().path(in: rect)
        path.addPath(Circle().path(in: rect.inset(by: UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 10))
            .offsetBy(dx: 50, dy: -10)))
        return path
    }
}

struct MoonView: View {
    var body: some View {

        Circle()
            .mask(MoonMask().fill(style: FillStyle(eoFill: true)))

            // below is just demo
            .frame(width: 200, height: 200)
            .foregroundColor(Color.yellow)
            .padding().background(Color.black)
    }
}

swiftUI moon shape

1 Answers1