# Path

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
What's the difference between [**Shape**](shape) and <mark style="color:purple;">**Path**</mark>:question:

* **Path** 是一個 <mark style="color:red;">**struct**</mark>，主要是用**絕對座標** (absolute coordinates) 來畫路徑。
* [Shape](shape) 是一個 <mark style="color:purple;">**protocol**</mark>，除了可以用絕對座標畫路徑外，必要實現的 [.path(in: rect)](https://developer.apple.com/documentation/swiftui/shape/path\(in:\)) 方法也提供了一個 CGRect 參數，讓我們可以根據 container 的**相對位置**來畫路徑。 :point\_right: [Paul](https://www.hackingwithswift.com/books/ios-swiftui/paths-vs-shapes-in-swiftui)
{% endhint %}
{% endtab %}

{% tab title="📜 協定" %}
![Path → Shape ⇢ View](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MIr8eJDKKYiXZczORz_%2F-MIrTLoXWUGD3YwoFXVH%2FView%20protocol%202020.10.05.png?alt=media\&token=97f68474-f0eb-41ef-8762-c4ae689feb00)
{% endtab %}

{% tab title="💈範例" %}
⬆️ 需要： [shape.outlined](shape/shape/shape.outlined "mention"), [frame](../../custom/package/geometrykit/frame "mention")

```swift
/// a custom shape
struct BlobShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            // `CGRect` conforms to `Rectangular` protocol, 
            // which has `rect[x,y]` subscript method.
            path.move(to: rect[0.5, 0])
            path.addCurve(to: rect[1.0, 0.5], control1: rect[1.0, 0.0], control2: rect[1.0, 0.0])
            path.addCurve(to: rect[0.5, 1.0], control1: rect[0.5, 0.5], control2: rect[1.0, 1.0])
            path.addCurve(to: rect[0.0, 0.5], control1: rect[0.0, 1.0], control2: rect[0.5, 0.5])
            path.addCurve(to: rect[0.5, 0.0], control1: rect[0.0, 0.0], control2: rect[0.0, 0.0])
            path.closeSubpath()
        }
    }
}

/// a view containing a custom shape
struct BlobView: View {
    var body: some View {
        BlobShape()
            .outlined(                    // 🌀Shape+ext
                fill: .linearGradient(
                    colors    : [.yellow, .green, .blue],
                    startPoint: .topLeading,
                    endPoint  : .bottomTrailing
                ),
                strokeStyle: .init(lineWidth: 10)
            )
            .frame(width: 300, height: 300)
    }
}
```

![BlobView](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FajwVdNGJcqnBqlBJQwNs%2Fblob-shape.png?alt=media\&token=5f8a7b6c-305a-4ce4-9dda-e241b15f73f7)
{% endtab %}

{% tab title="📘 手冊" %}
* SwiftUI  ⟩ [Path](https://developer.apple.com/documentation/swiftui/path)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] AppCoda ⟩&#x20;
  * [ ] [應用 SwiftUI Path API 繪製撲克牌的四種花色！](https://www.appcoda.com.tw/swiftui-path-draw-cards-shades/)
  * [ ] [利用 SwiftUI Path　輕鬆建立漂亮的折線圖！](https://www.appcoda.com.tw/swiftui-path/)
* [ ] objc.io ⟩ [SwiftUI Path Builder](https://talk.objc.io/collections/swiftui-path-builder) ⟩ [SwiftUI Path Builder: Detecting Taps](https://talk.objc.io/episodes/S01E244-detecting-taps) ⭐️
{% endtab %}

{% tab title="👥 相關" %}
* conforms to [shape](shape "mention").
* [path+](../view/view/.dimension/path+ "mention"): helper extension for [.dimension](../view/view/.dimension "mention").
* [animation-curves](../anim/animation-curves "mention")
* [bezier-curves](../anim/animation-curves/bezier-curves "mention").
{% endtab %}

{% tab title="🛠 工具" %}
* [Paint Code](https://www.paintcodeapp.com/) (<mark style="color:red;">**app**</mark>)
{% endtab %}

{% tab title="❓" %}
* SwiftUI ⟩ [Path](https://developer.apple.com/documentation/swiftui/path) ⟩ [.forEach(\_:)](https://developer.apple.com/documentation/swiftui/path/foreach\(_:\)) - 此方法到底有何作用❓
{% endtab %}
{% endtabs %}
