# Point

[SwiftUI](../../..) ⟩ [Drawing](../..) ⟩ [Shape](..) ⟩ [Helper Shapes]() ⟩

![Point (View)](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2Fy7QoZIcgGwzmtCpusFV3%2FPoint%20\(View\).png?alt=media\&token=54758a25-ea1e-4d42-ac8d-de8258edc8d0)

{% tabs %}
{% tab title="🖼 Point" %}
⬆️ 需要： [frame](../../../../custom/package/geometrykit/frame "mention")

````swift
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)
    }
}
````
{% endtab %}

{% tab title="👁️ 預覽" %}
⬆️ 需要： [gridlines](gridlines "mention"), [.white](../../shapestyle/.white "mention"), [line](line "mention"), [point](point "mention")

```swift
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()
    }
}
```
{% endtab %}

{% tab title="⬇️ 應用" %}
* used in [pin](pin "mention").
* used in [vehicle.carbodyshape](../sports-car-in-sunset/vehicle.carbodyshape "mention")'s previews.
* used in [vehicle](../sports-car-in-sunset/vehicle "mention") as wheels' shape.
{% endtab %}

{% tab title="👥 相關" %}
* uses <mark style="color:red;">**absolute**</mark> [position](../../../view/layout/position "mention") and becomes a <img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F3B87hqej0rIvxYpR0crQ%2Fpush-out.jpg?alt=media&#x26;token=ba0b9aed-9d54-4ba4-844d-4dd2ff648614" alt="" data-size="line"> "<mark style="color:red;">**push-out**</mark>" [view](../../../view/view).
{% endtab %}
{% endtabs %}
