🖼️Point

SwiftUI ⟩ Drawing ⟩ Shape ⟩ Helper Shapes ⟩

⬆️ 需要： Frame

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

PreviousPin NextSports Car in Sunset

Last updated 3 years ago

Was this helpful?

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

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