SwiftUI - 繪製圓形

---

---

圓形是幾何學中一種封閉的圖形或形狀。它是由一組到平面上的一個固定點的距離相等的點形成的，其中固定距離稱為圓的半徑，固定點稱為圓心。圓上所有點到圓心的距離都相同。因此，在本節中，我們將學習如何在 SwiftUI 中繪製圓形。

在 SwiftUI 中繪製圓形

在 SwiftUI 中，我們將繪製各種型別的圓形，例如實心圓、無填充或圓形描邊的圓以及自定義圓形。為了繪製圓形，SwiftUI 提供了一個名為 addArc() 的內建方法。此方法根據指定的半徑和角度計算起點和終點，在這些點之間建立曲線，然後將這些曲線插入路徑以建立圓形。

語法

以下是語法：

func addArc(
   center: CGPoint, 
   radius: CGFloat, 
   startAngle: Angle, 
   endAngle: Angle, 
   clockwise: Bool, 
   transform: CGAffineTransform = .identity
)

引數

此函式接受以下引數：

• center: 此引數的座標表示圓弧的中心。
• radius: 此引數的座標表示圓弧的半徑。
• startAngle: 它表示圓弧起點的角度。它從正 x 軸計算。
• endAngle: 它表示圓弧終點的角度。它從正 x 軸計算。
• clockwise 如果此引數的值設定為 true，則圓弧將按順時針方向建立。否則，圓弧將按逆時針方向建立。
• transform: 用於在將圓弧新增到路徑之前對其應用轉換。預設情況下，它設定為恆等轉換。

在 SwiftUI 中繪製圓形的步驟

請按照以下步驟在 SwiftUI 中繪製一個簡單的實心圓：

步驟 1：初始化路徑

要建立圓形，首先我們需要初始化 Path 並提供詳細的說明在閉包中。路徑允許我們透過指定一系列連線的點和線來建立複雜的圖形。

Path() {}

步驟 2：移動到圓形中心

現在我們使用 move(to:) 方法移動到給定畫布中圓形的中心。或者我們可以說我們使用 move(to:) 方法到達圓形中心。

Path(){
   yPath in
      yPath.move(to: CGPoint(x: 200, y: 200))
}

步驟 3：繪製實心圓

現在我們呼叫 addArc() 方法根據初始化的引數繪製圓形，例如圓形的中心應位於座標 (200, 200) 處，圓形的半徑為 100，起始和結束角度為 0.0 度和 360.0 度，圓弧的方向為順時針方向。

Path(){ 
   yPath in
      yPath.move(to: CGPoint(x: 200, y: 200))
      yPath.addArc(center: CGPoint(x: 200, y:200), radius: 100, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 360.0), clockwise: true)
}

步驟 4：填充圓形

我們可以使用 .fill() 修飾符指定圓形的顏色。預設情況下，圓形的顏色為黑色。或者如果我們只想描邊，則可以使用 .stroke() 修飾符。

Path(){
   yPath in
      yPath.move(to: CGPoint(x: 200, y: 200))
      yPath.addArc(center: CGPoint(x: 200, y:200), radius: 100, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 360.0), clockwise: true)
}.fill(Color.cyan)

因此，圓形將如以下影像所示建立。

示例 1

以下 SwiftUI 程式用於繪製實心圓。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path(){
         yPath in
            yPath.move(to: CGPoint(x: 200, y: 200))
            yPath.addArc(center: CGPoint(x: 200, y:200), radius: 100, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 360.0), clockwise: true)
      }.fill(Color.cyan)
   }
}
#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於繪製描邊圓或帶邊界的圓。

import SwiftUI

struct ContentView: View {
   var body: some View {        
      Path(){
         yPath in
         yPath.move(to: CGPoint(x: 200, y: 200))
         yPath.addArc(center: CGPoint(x: 200, y:200), radius: 100, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 360.0), clockwise: true)
      }.stroke(Color.blue, lineWidth: 4)
   }
}

#Preview {
    ContentView()
}

輸出

示例 3

以下 SwiftUI 程式用於繪製自定義圓形。其中圓形是根據給定的中心座標和半徑建立的。

import SwiftUI

struct Circle : Shape {
   var radius : CGFloat
   var center : CGPoint
 
   func path(in rect: CGRect) -> Path {
      var mPath = Path()
        
      // Calculating the coordinates of center
      let Xcenter = center.x - rect.origin.x
      let Ycenter =  center.y - rect.origin.y
    
      // For circle
      mPath.addArc(
	     center: CGPoint(x: Xcenter, y: Ycenter), 
		 radius: radius, startAngle: Angle(degrees: 0.0), 
		 endAngle: Angle(degrees: 360.0), 
		 clockwise: true
      )        
      return mPath
   }
}

struct ContentView: View {
   var body: some View {
      Circle(radius: 50, center: CGPoint(x: 100, y: 200))
      .stroke(Color.mint, lineWidth: 4)
   }
}

#Preview {
   ContentView()
}

輸出