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-Drawing 多边形

多边形是具有有限直边数的封闭形状。根据边数,它们可分为三角形(3 条边)、五边形(5 条边)、四边形(4 条边)、六边形(6 条边)、八边形(8 条边)、九边形(9 条边)等。

绘制多边形

SwiftUI 不提供任何内置方法来创建多边形。因此,我们将借助 addLine() 方法创建自定义多边形。此方法从当前点到给定点(端点)添加一条直线段。

语法

以下是语法−

addLine(to end: CGPoint)

它仅需要一个参数,即 end,表示线段端点在用户空间坐标中的位置

在 SwiftUI 中绘制多边形的步骤

按照以下步骤在 SwiftUI 中绘制多边形 −

步骤 1:定义自定义形状

要绘制多边形,我们需要创建一个符合 Shape 协议的结构。在这里,我们将定义如何在 path(in:) 方法中创建多边形。

struct Polygon: Shape {
   var side: Int    
   func path(in rect: CGRect) -> Path {
      guard side > 2 else { return Path() 
   }
        
   let Pcenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
   let Pangle = (2 * .pi) / CGFloat(side)
   let Pradius = min(rect.width, rect.height) / 2   
   var xpath = Path()   
   for a in 0..<side {
      let x = Pcenter.x + Pradius * cos(CGFloat(a) * Pangle - .pi / 2)
      let y = Pcenter.y + Pradius * sin(CGFloat(a) * Pangle - .pi / 2)
      if a == 0 {
         xpath.move(to: CGPoint(x: x, y: y))
      } else {
         xpath.addLine(to: CGPoint(x: x, y: y))
      }
   }
   xpath.closeSubpath()
   return xpath
}

第 2 步:创建视图

现在我们在 SwiftUI 视图中使用自定义多边形。它将显示自定义多边形的外观。

struct ContentView: View {
   var body: some View {
      Polygon(side: 6)
   }
}

步骤 3:添加其他自定义项

我们还可以在多边形中添加其他自定义项,如描边、填充、阴影、叠加文本等。

struct ContentView: View {
   var body: some View {
      Polygon(side: 6)
         .stroke(Color.purple, lineWidth: 5)
         .frame(width: 300, height: 300)
         .padding()
   }
}

示例

以下 SwiftUI 程序用于绘制一个简单的多边形。

import SwiftUI
struct Polygon: Shape {    
   var side: Int    
   func path(in rect: CGRect) -> Path {
      guard side > 2 else {return Path()}
      let Pcenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
      let Pangle = (2 * .pi) / CGFloat(side)
      let Pradius = min(rect.width, rect.height) / 2
      var xpath = Path()
      for a in 0..<side {
         let x = Pcenter.x + Pradius * cos(CGFloat(a) * Pangle - .pi / 2)
         let y = Pcenter.y + Pradius * sin(CGFloat(a) * Pangle - .pi / 2)
         if a == 0 {
            xpath.move(to: CGPoint(x: x, y: y))
         } else {
            xpath.addLine(to: CGPoint(x: x, y: y))
         }
      }
	  xpath.closeSubpath()
      return xpath
   }
}
struct ContentView: View {
   var body: some View {
      Polygon(side: 6)
         .stroke(Color.purple, lineWidth: 5)
         .frame(width: 300, height: 300)
         .padding()
   }
}
#Preview {
   ContentView()
}

输出

绘制多边形

我们还可以使用各种修饰符(如 .fill()、frame()、.shadow()、.overlay 等)自定义多边形,使其更具吸引力。这里我们绘制了一个带阴影的实心多边形,因此我们将使用 .fill() 修饰符制作实心多边形,并使用 shadow() 应用阴影效果

struct ContentView: View {
   var body: some View {
      Polygon(side: 7)
         .fill(Color.mint)
         .frame(width: 300, height: 300)
         .shadow(radius: 10)
   }
}

输出

绘制多边形