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) } }
输出
