🖼️Point

SwiftUI ⟩ Drawing ⟩ Shape ⟩ Helper Shapes ⟩

Point (View)

🖼 Point

⬆️ 需要： Rectangular

import SwiftUI

/// draw a relative point in a rect.
/// ```
/// Point(A)  // A: UnitPoint
/// Point(A, .black, size: 20, label: "A")
/// ```
struct Point: View {
    
    let point: UnitPoint
    var color: Color     = .pink
    var size : CGFloat   = 24
    var label: String    = ""
    
    var body: some View {
        GeometryReader { geo in
            Circle()
                // point color
                .fill(color)
                // point label
                .overlay(Text(label).font(.caption).bold())
                // point size
                .frame(width: size, height: size)
                // ⭐️ absolute position
                // ⭐️ frame changed! ("push-out" view)
                .position(geo.size[point])    // 🅿️ Rectangular
        }
    }
}

// convenience init
extension Point {
    init(
        _ point: UnitPoint, 
        _ color: Color      = .pink, 
        size   : CGFloat    = 24, 
        label  : String     = ""
    ) {
        self.init(point: point, color: color, size: size, label: label)
    }
}

👁️ 預覽

⬆️ 需要： GridLines, .white(), Line, Point

struct Point_Previews: PreviewProvider {
    // relative points
    static let A: UnitPoint = [0.3, 0.8]
    static let B: UnitPoint = [0.2, 0.5]
    static let C: UnitPoint = [0.7, 0.3]
    // previews
    static var previews: some View {
        ZStack {
            // 🖼 Line (3 segments)
            Line(A, B)
            Line(B, C)
            Line(C, A)
            // 🖼 Point (3 points)
            Point(A, label: "A")
            Point(B, .blue, label: "B")
            Point(C, .green, size: 30)
            Point(C, .black, size: 20, label: "C")
        }
        .compositingGroup()
        .shadow(color: .black.opacity(0.8), radius: 4, y: 4)
        
        // 🖼 GridLines, 🌀Color+
        .background(GridLines(color: .white(0.3)))
         
        .border(Color.black.opacity(0.8))
        .frame(height: 150)
        .padding(8)
        .background(.white(0.5))    // 🌀ShapeStyle+
        .padding()
    }
}

⬇️ 應用

• used in Pin.

• used in Vehicle.CarBodyShape's previews.

• used in Vehicle as wheels' shape.

👥 相關

• uses absolute Position and becomes a "push-out" view.