# RoundedCorners

![RoundedCorners 的設計圖](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MIU2cc-u_XsKa0M3Uon%2F-MIU8Gbng_WIES-VdnNb%2Frounded%20corners.png?alt=media\&token=df8a7d63-f380-4743-8ac3-44d66e113bbf)

{% tabs %}
{% tab title="💈 RoundedCorners" %}

```swift
import SwiftUI

// ⭐️ required: 🅿️Vector2D, 🌀CGRect

public struct RoundedCorners: Shape {
    
    // corner radii
    let topLeft    : CGFloat
    let topRight   : CGFloat
    let bottomRight: CGFloat
    let bottomLeft : CGFloat
    
    // init
    public init(
        topLeft     r1: CGFloat = 0,
        topRight    r2: CGFloat = 0,
        bottomRight r3: CGFloat = 0,
        bottomLeft  r4: CGFloat = 0
    ) {
        self.topLeft     = r1
        self.topRight    = r2
        self.bottomRight = r3
        self.bottomLeft  = r4
    }
    
    public func path(in rect: CGRect) -> Path {
        
        // related dimensions
        let w = rect.width
        let h = rect.height
        let m = rect.minLength / 2  // max radius allowed
        
        // calculate radii
        let r1 = min(topLeft, m)
        let r2 = min(topRight, m)
        let r3 = min(bottomRight, m)
        let r4 = min(bottomLeft, m)
        
        // draw path
        return Path { path in
            
            // starting point: top center
            path.move(to: [w/2, 0])
                
            // to top right
            path.addLine(to: [w - r2, 0])
            path.addArc(
                center    : [w - r2, r2], 
                radius    : r2, 
                startAngle: .degrees(-90), 
                endAngle  : .degrees(0), 
                clockwise : false
            )
            
            // to bottom right
            path.addLine(to: [w, h - r3])
            path.addArc(
                center    : [w - r3, h - r3], 
                radius    : r3, 
                startAngle: .degrees(0), 
                endAngle  : .degrees(90), 
                clockwise : false
            )
            
            // to bottom left
            path.addLine(to: [r4, h])
            path.addArc(
                center    : [r4, h - r4], 
                radius    : r4, 
                startAngle: .degrees(90), 
                endAngle  : .degrees(180), 
                clockwise : false
            )
            
            // to top left
            path.addLine(to: [0, r1])
            path.addArc(
                center    : [r1, r1], 
                radius    : r1, 
                startAngle: .degrees(180), 
                endAngle  : .degrees(270), 
                clockwise : false
            )
            
            // close path
            path.closeSubpath()
        }
    }
}
```

{% endtab %}

{% tab title="💈 範例" %}

```swift
struct ContentView: View {
    
    let shape = RoundedCorners(        // ⭐️ RoundedCorners
        topLeft: 40, topRight: 40, 
        bottomRight: 80, bottomLeft: 80
    )
    
    var body: some View {
        ZStack {
            
            shape
                .fill(Color.pink)
                .overlay(shape.stroke(Color.purple, lineWidth: 20))
                
            shape.stroke()
            
        } // ZStack (container) 
            .padding(40)
            .shadow( radius: 16)
            .frame(width: 300, height: 300)
            .background(Color.gray)
    }
}
```

{% endtab %}

{% tab title="📘  參考" %}

* [x] [GeometryReader to the Rescue](https://swiftui-lab.com/geometryreader-to-the-rescue/) - The SwiftUI Lab
  {% endtab %}

{% tab title="🧩  相依套件" %}

* [🅿️ Vector2D](https://lochiwei.gitbook.io/ios/custom/package/geometrykit/vector2d)
* [📦 CGRect](https://lochiwei.gitbook.io/ios/swift/scope/framework/built-in-frameworks/core-graphics/cgrect+ext#cgrect)
  {% endtab %}
  {% endtabs %}