'Swift UI - Path Not Contained Within Frame

I am creating a simple path between two coordinates ([100, 100], [300, 300]) and I want the frame of that path to be only the size it needs to be (i.e., 200 x 200). For some reason, while the frame shrinks to the desired 200 x 200 size, the path starts being drawn in the middle of the frame and therefore overflows.

How can I centre the path within a frame? I tried assigning alignment: .topLeading on the path frame parameter but that didn't change anything.

Code:

struct RelationView: View {
    let startPoint = CGPoint(x: 100, y: 100)
    let endPoint = CGPoint(x: 300, y: 300)
    
    var body: some View {
        Path({ path in
            path.addLines([
                startPoint,
                CGPoint(x: (startPoint.x + endPoint.x) / 2, y: startPoint.y),
                CGPoint(x: (startPoint.x + endPoint.x) / 2, y: endPoint.y),
                endPoint
            ])
        })
            .stroke()
            .frame(width: 200, height: 200)
    }
}

Result: iPad Preview of Frame and Path



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source