I want to apply ContainerRelativeShape only to specific corners [SwiftUI]

This article wants to use the automatic rounded ContainerRelativeShape that appeared in iOS 14 only for specific corners.

What is ContainerRelativeShape?

The number of UI with rounded corners unique to each part is increasing, such as the iPhone 11 terminal itself and the widget that appeared in iOS14. The ContainerRelativeShape displays the appropriate rounded radius at each location.

SwiftUI gives you ContainerRelativeShape() in iOS 14, which automatically makes a corner radius concentric to its parent shape without needing to manually specify corner radius values ✨ pic.twitter.com/MO2IQuE7nx

— Jordan Singer (@jsngr) June 27, 2020

Purpose

Place it in the upper left	Apply ContainerRelativeShape	Expand and round the upper left corner!

--I want to round only specific corners --And I want to use the automatically calculated ContainerRelativeShape instead of just rounded corners.

I will explain the implementation of the image on the far right that realized this.

code

Custom Shape

Using the Shape Protocol There is a good ʻUIRectCornerOptionSet that handles corner information, so use it Define your ownContainerRelativeShapeSpecificCorner` Struct.

struct ContainerRelativeShapeSpecificCorner: Shape {
    
    private let corners: [UIRectCorner]
    
    init(corner: UIRectCorner...) {
        self.corners = corner
    }
    
    func path(in rect: CGRect) -> Path {
        var p = ContainerRelativeShape().path(in: rect)
        
        if corners.contains(.allCorners) {
            return p
        }
        
        if !corners.contains(.topLeft) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x, y: rect.origin.y, width: rect.width / 2, height: rect.height / 2)))
        }
        if !corners.contains(.topRight) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x + rect.width / 2, y: rect.origin.y, width: rect.width / 2, height: rect.height / 2)))
        }
        if !corners.contains(.bottomLeft) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x, y: rect.origin.y + rect.height / 2, width: rect.width / 2, height: rect.height / 2)))
        }
        if !corners.contains(.bottomRight) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2, width: rect.width / 2, height: rect.height / 2)))
        }
        return p
    }
}

Usage example

//Originally
Image("camera")
    .clipShape(ContainerRelativeShape())

//This guy(Rounded corners only for specific corners)
Image("camera")
    .clipShape(ContainerRelativeShapeSpecificCorner(corner: .topLeft, .topRight))

//All code samples
struct SampleView: View {
    var body: some View {
        Group {
            Image("camera")
                .resizable()
                .scaledToFill()
                .frame(width: 80, height: 80)
                .clipShape(ContainerRelativeShapeSpecificCorner(corner: .topLeft))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .padding(8)
    }
}