SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


SwiftUI - 绘制星形

星星是一种类似于宇宙中星星的形状。它是通过连接正多边形的非相邻顶点创建的封闭形状。在 SwiftUI 中,星形用于评级系统中表示评级,在书签系统中标记喜欢的项目,也可用于指示各种状态或成就。

它也用于导航等。它还有助于为 Apple 的应用程序创建引人入胜且有吸引力的用户界面。

在 SwiftUI 中绘制星形

Swift 不提供任何内置方法来直接创建星形,因此在这里我们将讨论如何借助 path(in:) 和 addLine(to:) 方法创建自定义星形。这里使用 path(in:) 方法计算星形的点,使用 addLine(to:) 方法通过画线将它们连接起来。

语法

以下是语法 −

addLine(to end: CGPoint)

参数

end:此参数表示线段终点在用户空间坐标中的位置。

按照步骤在 SwiftUI 中绘制星形 −

在 SwiftUI 中绘制星形的步骤

步骤 1:定义星形的形状

创建一个符合 Shape 协议的星形结构体。在这个结构中,我们实现 path(in:) 和 addLine(to:) 方法来查找点并连接它们。

struct MyStar: Shape {
   func path(in rect: CGRect) -> Path {
      let Scenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
      let StarVertices = 5
      let SinnerRadius = rect.width / 5
      let SouterRadius = rect.width / 2

      var path = Path()

      let AIncrement = .pi * 2 / CGFloat(StarVertices)
      let halfAngleIncrement = AIncrement / 2

      for p in 0..<StarVertices {
         let angle = CGFloat(p) * AIncrement
         let outerPoint = CGPoint(
            x: Scenter.x + cos(angle) * SouterRadius, y: Scenter.y + sin(angle) * SouterRadius)
         let innerPoint = CGPoint(
            x: Scenter.x + cos(angle + halfAngleIncrement) * SinnerRadius,
            y: Scenter.y + sin(angle + halfAngleIncrement) * SinnerRadius)

         if p == 0 {
            path.move(to: outerPoint)
         } else {
            path.addLine(to: outerPoint)
         }

         path.addLine(to: innerPoint)
      }

      path.closeSubpath()

      return path
   }
}

步骤 2:在视图中指定星形

现在在 ContentView 中插入星形结构以在屏幕上显示该形状

struct ContentView: View {
   var body: some View {
      VStack {
         MyStar()
      }
   }
}

步骤 3:自定义星形

我们可以借助 SwiftUI 提供的各种修饰符(例如 fill()、frame()、background() 等)自定义星形。

struct ContentView: View {
   var body: some View {
      VStack {
         MyStar()
           .fill(Color.pink)
           .frame(width: 150, height: 150)
           .background(Color.yellow)
           .clipShape(Circle())
      }
   }
}

示例 1

以下 SwiftUI 程序用于绘制具有圆形背景的星形。

import SwiftUI

// Star shape
struct MyStar: Shape {

  func path(in rect: CGRect) -> Path {
    let Scenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
    let StarVertices = 5
    let SinnerRadius = rect.width / 5
    let SouterRadius = rect.width / 2

    var path = Path()

    let AIncrement = .pi * 2 / CGFloat(StarVertices)
    let halfAngleIncrement = AIncrement / 2

    for p in 0..<StarVertices {
      let angle = CGFloat(p) * AIncrement
      let outerPoint = CGPoint(
        x: Scenter.x + cos(angle) * SouterRadius, y: Scenter.y + sin(angle) * SouterRadius)
      let innerPoint = CGPoint(
        x: Scenter.x + cos(angle + halfAngleIncrement) * SinnerRadius,
        y: Scenter.y + sin(angle + halfAngleIncrement) * SinnerRadius)

      if p == 0 {
         path.move(to: outerPoint)
      } else {
         path.addLine(to: outerPoint)
      }
       path.addLine(to: innerPoint)
    }
    path.closeSubpath()
    return path
  }
}
struct ContentView: View {
   var body: some View {
      VStack {
         MyStar()
            .fill(Color.pink)
            .frame(width: 150, height: 150)
            .background(Color.yellow)
            .clipShape(Circle())
      }
   }
}

#Preview {
   ContentView()
}

输出

绘制星星

示例 2

以下 SwiftUI 程序用于绘制具有不同顶点数的多个星形。

import SwiftUI

// Star shape
struct Star: Shape {
   var vertex: Int

   func path(in rect: CGRect) -> Path {
      guard vertex >= 2 else { return Path() }

      let Scenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
      let Sangle = 2 * .pi / Double(vertex)
      let Sradius = min(rect.width, rect.height) / 2

      var path = Path()
      var firstPoint = true

      for i in 0..<vertex * 2 {
         let cAngle = Double(i) * Sangle / 2
         let points = CGPoint(
            x: Scenter.x + CGFloat(cos(cAngle)) * (i % 2 == 0 ? Sradius : Sradius / 2),
            y: Scenter.y + CGFloat(sin(cAngle)) * (i % 2 == 0 ? Sradius : Sradius / 2)
         )

         if firstPoint {
            path.move(to: points)
            firstPoint = false
         } else {
            path.addLine(to: points)
         }
      }

      path.closeSubpath()

      return path
   }
}

struct ContentView: View {
   var body: some View {
      VStack {
         Star(vertex: 5)
            .fill(Color.green)
            .frame(width: 150, height: 150)
         Star(vertex: 7)
            .fill(Color.green)
            .frame(width: 150, height: 150)
      }.padding()
   }
}
#Preview {
   ContentView()
}

输出

Drawing Star