# 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](/files/-MIrTLoXWUGD3YwoFXVH)
{% 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](/files/fFa35GqjTbjEbJxEXJWA)
{% 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/ios/swiftui/shapes/path.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.