> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/master/todo/custom-types/point.md).

# Custom Circle

在螢幕上畫點，可設定顏色、半徑、外框顏色、透明度等。

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MIXG2g9tRDKN88vTkdw%2F-MIXGbe6vKplx7uJ4opW%2Fpoint.png?alt=media\&token=0595ba44-ac7b-4786-8a57-6688655ce765)

{% tabs %}
{% tab title="👔 Point" %}

```swift
import SwiftUI
import Extensions  // for 🌀View + .frame(_:_:)

// 📦 Point
public struct Point: View {
    
    // properties
    let color      : Color
    let radius     : CGFloat
    let strokeColor: Color
    let opacity    : Double
    
    // init
    public init(
        _ radius   : CGFloat = 10, 
        color      : Color   = .red, 
        strokeColor: Color   = .black,
        opacity    : Double  = 0.8
    ) {
        self.radius      = radius
        self.color       = color
        self.strokeColor = strokeColor
        self.opacity     = opacity
    }
    
    // content
    public var body: some View {
        ZStack {
            Circle()
                .fill(color)
                .frame(radius * 2, radius * 2)
                .opacity(opacity)
                .overlay(Circle().stroke(strokeColor)) // outline
                .shadow(radius: 8)
        }
    }
}
```

{% endtab %}

{% tab title="💈 範例" %}

```swift
HStack(spacing: 10) {
            
    Point()
    Point(15, color: .blue)
    Point(20, color: .black, strokeColor: Color(white: 0.8), opacity: 0.3)
    
    ZStack {
        Point(30, color: .green, opacity: 0.3)
        Point(color: .orange, opacity: 0.6)
    }
    
} // HStack (container)
    .frame(200, 100)
    .grids(.black)
    .background(Color.gray)
```

{% endtab %}

{% tab title="👥 相關" %}

* [Helper Shapes](/ios/swiftui/shapes/shape/helper-shapes.md) has more handy shapes.
  {% endtab %}
  {% endtabs %}