📦Path

What's the difference between Shape and Path❓

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

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

PreviousMGE ⟩ animation Nextpath.fit()

Last updated 3 years ago

Was this helpful?

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