🅿️Shape

╱🚧 under construction -> Canvas, Shape 必須具備甚麼特質？

SwiftUI ⟩ shapes ⟩ Shape (protocol)

Shape is a "push-out" view.

// protocol definition
protocol Shape : Sendable, Animatable, View, _RemoveGlobalActorIsolation

If you need the efficiency or flexibility of immediate mode drawing — for example, to create particle effects — use a Canvas view instead.

💈

• UpArrowShape

• GridLinesShape

• LineShape

• Vehicle.CarBodyShape

• Polygon - an animatable polygon shape.

⭐️

What's the difference between Shape and Path❓

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

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

👉 Hacking with Swift - Paths vs shapes in SwiftUI

📜

📘

• SwiftUI ⟩ Shapes ⟩ Shape ⟩

  • .fill(_:style:)
• SwiftUI ⟩

  • Shape
  • InsettableShape
• SwiftOnTap ⟩ View ⟩ .clipShape(_:style:) → some View

📗

• AppCoda - 用 SwiftUI Path 建立折線圖
• Big Mountain Studio ⟩ The SwiftUI Shapes Live Series
• objc.io - SwiftUI: Paths vs. Shapes
• Sarun ⟩ SwiftUI basic Shape operations

👥

• 🌀 Shape
• Shape：shape.fill(content) 的填充樣式 content 是 ShapeStyle。

• 🅿️ ShapeStyle
• inherits from View, Animatable.

• Path conforms to Shape.

• can have animations.

• can be filled.

• can be clipped using even-odd fill mode.

🛠

• SVG to SwiftUI Shape

🗣

• How can I clip a Shape with another Shape in SwiftUI? ⭐️

🐞

• 🐞 has non-Sendable type

Examples

ContentView

import SwiftUI
import PlaygroundSupport

// ContentView
struct ContentView: View {
    
    // body
    var body: some View {
        VStack{
            hstack1
            hstack2
        }.padding()
    }
    
    var hstack1: some View {
        HStack{
            Group{
                Triangle()
                    .stroke()
                Triangle()
                    .fill(Color.red)
                Triangle()
                    .stroke(Color.red, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
                Arc(start: 110, end: 0, clockwise: true)
                    .stroke(lineWidth: 10)
                    .stroke(lineWidth: 5)
                    .stroke()
            }
            .frame(width: 100, height: 100)
            .border(Color.orange)
        }
    }
    
    var hstack2: some View {
        HStack{
            Group{
                Arc(start: 90, end: 0, clockwise: true)
                    .stroke(Color.blue, lineWidth: 20)
                Arc(start: 0, end: 270, clockwise: true)
                    .stroke(Color.pink, lineWidth: 8)
            }
            .frame(width: 208, height: 100)
            .border(Color.yellow)
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

Arc

import SwiftUI
import Vector2D    // for API: rect.center ...

struct Arc: Shape {
    
    var start: Double  // in degrees
    var end: Double    // in degrees
    var clockwise: Bool
    
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.addArc(
                center: rect.center, 
                radius: rect.minSide / 2, 
                startAngle: .degrees(start), 
                endAngle: .degrees(end), 
                clockwise: !clockwise
            )
        }
    }
}

Triangle

import SwiftUI
import Vector2D    // for API: rect.top ...

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path { 
        Path { path in
            path.move(to: rect.top)
            path.addLine(to: rect.bottomLeft)
            path.addLine(to: rect.bottomRight)
            path.addLine(to: rect.top)
        }
    }
}

📘 手冊

• Shape ⟩ .path(in:)

👥 相關

• Vector2D

範例

• 💈 RoundedCorners