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 轴正方向计算。
• clock如果此参数的值设置为 true，则圆弧将从顺时针方向创建。否则，圆弧将逆时针创建。
• transform:用于在添加到路径之前对圆弧应用变换。默认情况下，它设置为身份变换。

在 SwiftUI 中绘制圆圈的步骤

按照以下步骤在 SwiftUI 中绘制一个简单的实心圆圈−

步骤 1:初始化 Path

要创建一个圆圈，首先我们需要初始化 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()
        
      // 计算中心坐标
      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()
}

输出