📦Path

⭐️ 重點

What's the difference between Shape and Path❓

• Path 是一個 struct，主要是用絕對座標 (absolute coordinates) 來畫路徑。

• Shape 是一個 protocol，除了可以用絕對座標畫路徑外，必要實現的 .path(in: rect) 方法也提供了一個 CGRect 參數，讓我們可以根據 container 的相對位置來畫路徑。 👉 Paul

📜 協定

Path → Shape ⇢ View

💈範例

⬆️ 需要： shape.outlined(), Frame

/// 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

📘 手冊

• SwiftUI ⟩ Path

📗 參考

• AppCoda ⟩

  • 應用 SwiftUI Path API 繪製撲克牌的四種花色！

  • 利用 SwiftUI Path　輕鬆建立漂亮的折線圖！

• objc.io ⟩ SwiftUI Path Builder ⟩ SwiftUI Path Builder: Detecting Taps ⭐️

👥 相關

• conforms to Shape.

• Path+: helper extension for .dimension().

• Animation Curves

• Bezier Curves.

🛠 工具

• Paint Code (app)

❓

• SwiftUI ⟩ Path ⟩ .forEach(_:) - 此方法到底有何作用❓