SwiftUI - 繪製多邊形

多邊形是由有限數量的直線段圍成的封閉圖形。它們根據邊數進行分類，例如三角形（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)
   }
}

輸出