Why does this custom shape take up the entire vertical space? - swiftui

Question

I would like to know why this custom shape, which is just a letter template takes up the entire space of the view?? I never drew a line that required that much vertical space so I'm wondering what is going on.
Here is an example of what it looks like.
You can see that the image is pretty much doubled vertically.
Here is the code of the shape with its Parent View
import SwiftUI
struct ParentView: View {
var body: some View {
VStack {
Spacer()
LetterPreviewShape()
}
}
}
struct LetterPreviewShape: Shape {
func path(in rect: CGRect) -> Path {
let startingPoint = CGPoint(x: rect.minX, y: rect.minY)
let paragraphStartingPoint = CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.1)
var path = Path()
//Letter outline
path.move(to: startingPoint)
path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))
path.closeSubpath()
//Greeting Line
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.07))
path.addLine(to: CGPoint(x: rect.maxX * 0.3, y: rect.maxY * 0.07))
//Body Strokes
path.move(to: paragraphStartingPoint)
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.1))
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.11))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.11))
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.12))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.12))
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.13))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.13))
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.14))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.14))
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.15))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.15))
path.move(to: CGPoint(x: rect.maxX * 0.1, y: rect.maxY * 0.16))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.16))
//Signature Line
path.move(to: CGPoint(x: rect.maxX * 0.7, y: rect.maxY * 0.18))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.18))
path.move(to: CGPoint(x: rect.maxX * 0.7, y: rect.maxY * 0.19))
path.addLine(to: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * 0.19))
return path
}
}

Answer 1

Shapes in SwiftUI always fill the available space. It doesn't have anything to do with where you draw the content.
You can see this behavior replicated with the non-custom system shapes as well -- if you you just use a Rectangle or Circle, they will also fill the available space.
To constrain it, give it a frame -- possible in conjunction with a GeometryReader if you need to base it on the available size.
For example:
struct ContentView : View {
var body: some View {
GeometryReader { geometry in
VStack {
Spacer().frame(height: geometry.size.height / 2)
Rectangle().fill(Color.red).frame(height: geometry.size.height / 2)
}
}
}
}

Answer 2

Shape does not have own frame, so you have to give it one externally (or it fills everything available), like
struct ParentView: View {
var body: some View {
VStack {
Spacer()
LetterPreviewShape()
.frame(height: 200) // << this goes in `func path(in rect: CGRect) -> Path`
}
}
}