SwiftUI - 绘制三角形

三角形是三边多边形。它有三条边、三个角和三个顶点。它也用于 UI(用户界面)设计，以创建自定义图标、装饰元素、箭头和指针、进度指示器、遮罩和剪裁等。因此，在本章中，我们将学习如何在 SwiftUI 中创建三角形。

在 SwiftUI 中绘制三角形

SwiftUI 不提供内置三角形，如矩形和圆形，但我们仍然可以通过使用 Path 结构或使用 Shape 协议来绘制自定义三角形。

这两种方法都可以绘制满足应用程序需求的三角形设计。现在我们将逐步学习如何使用这两种方法创建三角形。

使用 Path 结构在 SwiftUI 中绘制三角形的步骤

按照下面给出的步骤在 SwiftUI 中使用 Path 结构绘制三角形−

步骤 1:初始化 Path

首先初始化 Path 并在闭包中提供详细说明。它将帮助我们通过连接一系列点和线来创建三角形。

Path() {}

步骤 2:移动到指定坐标

现在我们使用 move(to:) 方法移动到三角形开始绘制的原点。

Path(){ 
   xPath in
      xPath.move(to: CGPoint(x: 250, y: 100))
}

步骤 3:绘制三角形

现在，如果我们使用 .fill() 和 .closeSubpath() 方法，我们将调用 addLine(to:) 方法两次，因为它们会自动将当前点连接到原点。否则，我们将调用 addLine(to:) 方法三次，以绘制三角形的三条连接线。

Path(){ 
   xPath in
      xPath.move(to: CGPoint(x: 250, y: 100))
      xPath.addLine(to: CGPoint(x: 350, y: 250))
      xPath.addLine(to: CGPoint(x: 150, y: 250))
}

步骤 4:填充颜色

默认情况下，三角形以黑色创建，因此使用 .fill 修饰符，我们可以根据自己的选择更改三角形的颜色。

Path(){ 
   xPath in
      xPath.move(to: CGPoint(x: 250, y: 100))
      xPath.addLine(to: CGPoint(x: 350, y: 250))
      xPath.addLine(to: CGPoint(x: 150, y: 250))
}.fill(Color.teal)

示例 1

以下 SwiftUI 程序用于使用 Path 结构绘制三角形。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path(){ 
	     xPath in
            xPath.move(to: CGPoint(x: 250, y: 100))
            xPath.addLine(to: CGPoint(x: 350, y: 250))
            xPath.addLine(to: CGPoint(x: 150, y: 250))
      }.fill(Color.teal)
   }
}
#Preview {
   ContentView()
}

输出

示例 2

以下 SwiftUI 程序用于自定义三角形。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path { xPath in
         xPath.move(to: CGPoint(x: 300, y: 100))
         xPath.addLine(to: CGPoint(x: 350, y: 300))
         xPath.addLine(to: CGPoint(x: 150, y: 300))
         xPath.closeSubpath()
      }.stroke(Color.yellow, lineWidth: 4)
      .shadow(radius: 10)
   }
}

#Preview {
   ContentView()
}

输出

使用 Shape 协议在 SwiftUI 中绘制三角形的步骤

按照以下步骤在 SwiftUI 中使用 Shape 协议绘制三角形 −

步骤 1 − 定义自定义形状

要绘制自定义三角形，我们需要创建一个符合 Shape 协议的结构。在此结构中，我们将定义如何创建三角形以及 path(in:) 方法。

struct Triangle : Shape{}

步骤 2:创建视图

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

func path(
   in rect: CGRect) -> Path {
      var xpath = Path()
      xpath.move(to: CGPoint(x: rect.minX, y: rect.maxY))
      xpath.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
      xpath.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
      xpath.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
      return xpath
}

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

我们还可以使用各种修饰符(如描边、填充、阴影、覆盖文本等)自定义三角形。

Triangle()
   .fill(Color.yellow)
   .frame(width: 300, height: 400, alignment: .center)

示例

以下 SwiftUI 程序用于使用 Shape Protocol 创建自定义三角形。

import SwiftUI
struct Triangle : Shape{
   func path(in rect: CGRect) -> Path {
      var xpath = Path()
      xpath.move(to: CGPoint(x: rect.minX, y: rect.maxY))
      xpath.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
      xpath.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
      xpath.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
      return xpath
   }
}

struct ContentView: View {
   var body: some View {
      Triangle()
         .fill(Color.yellow)
         .frame(width: 300, height: 400, alignment: .center)
   }
}

#Preview {
   ContentView()
}

输出