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：新增其他自定義

我們還可以使用各種修飾符（如stroke、fill、shadow、overlay文字等）來自定義三角形形狀。

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

示例

以下SwiftUI程式用於使用Shape協議建立自定義三角形。

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()
}

輸出