Draw shape using GeometryReader

Question

I was able to do this:

GeometryReader { geometry in
        Capsule()
            .foregroundColor(.yellow)
            .frame(width: geometry.size.width * 1.7)
            .offset(x: geometry.size.width * -0.1 , y: geometry.size.height * -0.9)
    }

but I need something like this:

How can I achieve that?

Thanks

Answer 1

There seems to be a maximum width that a view can be before SwiftUI stops letting it get bigger; the capsule/circle shapes seem to hit this which is stopping you from increasing the size of the green shape.

You could try a custom path:

   struct ArcShape : Shape {
    let geometry: GeometryProxy
    func path(in rect: CGRect) -> Path {
        var p = Path()
        let center = CGPoint(x: 200, y: 100)
        p.addArc(center: center, radius:  geometry.size.width * 3, startAngle: .degrees(35), endAngle: .degrees(140), clockwise: false)
        return p
        }
    }
    struct ExampleView: View {
        var body: some View {
            NavigationView {
                GeometryReader { geometry in
        ZStack(alignment: .leading) {
            Color.white
                .edgesIgnoringSafeArea(.all)
                ArcShape(geometry: geometry)
                    .offset(x:  geometry.size.width * -0.3, y:  geometry.size.height * -1.45)
                    .foregroundColor(.green)
            VStack(alignment: .leading) {
                Section{
                    Text("Bold ").font(.system(size: 18, weight: .bold))
                        +
                        Text("light").font(.system(size: 18, weight: .light))
                }
                Section{
                    Text("Monday 27 Apr").font(.system(size: 27, weight: .light))
                }
                Spacer()
            }.padding(.horizontal)
            }
        }
        .navigationBarTitle("", displayMode: .inline)
                .navigationBarHidden(true)
        }
        }
     }