SwiftUI - 繪製矩形

---

---

矩形是幾何學中的一種四邊形。它有四條邊，其中對邊長度相等且互相平行。矩形的全部角都是直角。它通常用於建立各種物體，例如門、紙張、托盤等。

SwiftUI 中的矩形形狀用於定義各種 UI 元件的邊界，例如按鈕、文字框、影像框架、容器、面板等。或者我們可以說矩形是一個形狀檢視，用於在螢幕上顯示矩形區域。我們可以根據需要透過調整大小、位置、角、顏色等來自定義矩形的顯示。

在 SwiftUI 中繪製矩形

眾所周知，矩形是由連線四條線段構成，其中對邊彼此平行且長度相同。因此，在 SwiftUI 中，我們將使用addLine(to:)方法繪製矩形形狀。此方法會在當前點到給定點（終點）之間新增一條直線段。

語法

以下是語法：

addLine(to end: CGPoint)

此函式接受一個引數，即end。它表示線段終點在使用者空間座標中的位置。

在 SwiftUI 中繪製矩形的步驟

請按照以下步驟在 SwiftUI 中繪製矩形：

步驟 1：初始化路徑

要建立矩形，首先需要初始化 Path 併為其提供詳細說明。使用路徑，我們可以透過指定一系列連線的點和線來建立簡單或複雜的圖形。

Path() {}

步驟 2：移動到指定的座標

現在要開始繪製矩形，我們需要移動到矩形的起點，為此我們將使用 move(to:) 方法。它用於到達矩形/形狀的當前點/起點。

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

步驟 3：繪製矩形

現在，我們呼叫 addLine(to:) 方法，從給定點到點繪製線段以建立矩形形狀。

Path() { 
   xPath in
      xPath.move(to: CGPoint(x: 50, y: 50))
      xPath.addLine(to: CGPoint(x: 350, y: 50))
      xPath.addLine(to: CGPoint(x: 350, y: 200))
      xPath.addLine(to: CGPoint(x: 50, y: 200))
}

步驟 4：填充顏色

預設情況下，矩形以黑色建立，因此使用 .fill 修飾符可以更改矩形的顏色。

Path(){ 
   xPath in
      xPath.move(to: CGPoint(x: 50, y: 50))
      xPath.addLine(to: CGPoint(x: 350, y: 50))
      xPath.addLine(to: CGPoint(x: 350, y: 200))
      xPath.addLine(to: CGPoint(x: 50, y: 200))
}.fill(Color.orange)

示例 1

以下 SwiftUI 程式用於繪製橙色實心矩形。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path(){ 
	     xPath in
            xPath.move(to: CGPoint(x: 50, y: 50))
            xPath.addLine(to: CGPoint(x: 350, y: 50))
            xPath.addLine(to: CGPoint(x: 350, y: 200))
            xPath.addLine(to: CGPoint(x: 50, y: 200))
      }.fill(Color.orange)
   }
}

#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於繪製描邊矩形。這意味著它只包含矩形的邊界。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path(){ 
         xPath in
            xPath.move(to: CGPoint(x: 50, y: 50))
            xPath.addLine(to: CGPoint(x: 350, y: 50))
            xPath.addLine(to: CGPoint(x: 350, y: 200))
            xPath.addLine(to: CGPoint(x: 50, y: 200))
      }.stroke(Color.pink, lineWidth: 4)
   }
}
#Preview {
   ContentView()
}

輸出

這裡我們沒有繪製線段來連線座標 (50, 200) 和 (50, 50)，這將顯示一個開放式路徑。因此，要關閉此路徑，我們將在 Path 閉包的末尾呼叫closeSubpath()方法。它將自動連線當前點與原點。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path(){ 
	     xPath in
            xPath.move(to: CGPoint(x: 50, y: 50))
            xPath.addLine(to: CGPoint(x: 350, y: 50))
            xPath.addLine(to: CGPoint(x: 350, y: 200))
            xPath.addLine(to: CGPoint(x: 50, y: 200))
            xPath.closeSubpath()
      }.stroke(Color.pink, lineWidth: 4)
   }
}

#Preview {
    ContentView()
}

輸出