> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/shapes/path.md).

# Path

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

* **Path** 是一個 <mark style="color:red;">**struct**</mark>，主要是用**絕對座標** (absolute coordinates) 來畫路徑。
* [Shape](/ios/swiftui/shapes/shape.md) 是一個 <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()](/ios/swiftui/shapes/shape/shape/shape.outlined.md), [Frame](/ios/custom/package/geometrykit/frame.md)

```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](/ios/swiftui/shapes/shape.md).
* [Path+](/ios/swiftui/view/view/.dimension/path+.md): helper extension for [.dimension()](/ios/swiftui/view/view/.dimension.md).
* [Animation Curves](/ios/swiftui/anim/animation-curves.md)
* [Bezier Curves](/ios/swiftui/anim/animation-curves/bezier-curves.md).
  {% 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 %}