SwiftUI - 繪製線條

---

---

直線是幾何學中的一個基本概念。它是一條可以在兩個方向上無限延伸的直路徑。它由兩個點（例如 A 和 B）表示，通常用於定義各種形狀，如矩形、三角形、正方形、多邊形等，以及角和點之間的關係。它沒有任何厚度或寬度。儘管是一維的，它仍然可以存在於二維或更多維的平面中。

但是，直線也可以是兩個不同端點定義的有限部分，這部分稱為線段。與直線不同，線段具有確定的長度，並具有起點和終點。因此，在本節中，我們將學習如何在 SwiftUI 中繪製線段。

在 SwiftUI 中繪製線條

在 SwiftUI 中，我們可以使用addLine(to:)方法建立直線和線段。此方法從當前點到給定點（終點）新增一條直線段。此函式採用兩個座標（CGPoint(x:, y:)），即從當前點到線條將結束的終點的長度。

語法

以下是語法 -

addLine(to end: CGPoint)

它只接受一個引數，即end。此引數表示線段終點的座標。

在 SwiftUI 中繪製線條的步驟

請按照以下步驟在 SwiftUI 中繪製線條 -

初始化路徑

要建立線條或任何形狀，首先我們需要初始化 Path 並提供詳細的說明在閉包中。路徑用於定義自定義形狀和線條。它允許我們透過指定一系列連線的點和線來建立複雜的圖形。

Path() {}

移動到指定的座標

現在我們使用 move(to:) 方法移動到給定畫布的指定座標。或者我們可以說我們使用 move(to:) 方法到達線條的當前點/起點。

Path() { 
   myPath in
   myPath.move(to: CGPoint(x: 70, y: 300))
}

繪製線條

現在我們呼叫 addLine(to:) 方法從當前點到指定點/終點繪製一條線。

Path() { 
   myPath in
   myPath.move(to: CGPoint(x: 70, y: 300))
   myPath.addLine(to: CGPoint(x: 300, y: 300))
}

這裡move()方法包含起點的座標，addLine()方法包含線條終點的座標。

指定線條寬度和顏色

要指定線條的寬度和顏色，我們需要使用.stroke修飾符。

Path() { 
   myPath in
      myPath.move(to: CGPoint(x: 70, y: 300))
      myPath.addLine(to: CGPoint(x: 300, y: 300))
}.stroke(Color.indigo, lineWidth: 5)

示例 1

以下 SwiftUI 程式用於繪製線條。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path() { 
         myPath in
            myPath.move(to: CGPoint(x: 70, y: 300))
            myPath.addLine(to: CGPoint(x: 300, y: 300))            
        }.stroke(Color.indigo, lineWidth: 5)
    }
}
#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於在同一路徑中繪製多條線條。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Path() { 
         xPath in
            xPath.move(to: CGPoint(x: 90, y: 300))
            xPath.addLine(to: CGPoint(x: 200, y: 300))
            xPath.addLine(to: CGPoint(x: 100, y: 99))
      }.stroke(Color.red, lineWidth: 5)
   }
}

#Preview {
   ContentView()
}

輸出

示例 3

以下 SwiftUI 程式用於在不同的路徑中垂直繪製多條線條。這裡我們使用 VStack 垂直繪製線條。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{            
         // Line 1
         Path() { 
            myPath1 in
               myPath1.move(to: CGPoint(x: 90, y: 300))
               myPath1.addLine(to: CGPoint(x: 200, y: 300))
         }.stroke(Color.red, lineWidth: 5)
            
         // Line 2
         Path(){ 
            myPath2 in
               myPath2.move(to: CGPoint(x: 80, y: 290))
               myPath2.addLine(to: CGPoint(x: 300, y:239))
         }.stroke(Color.yellow, lineWidth: 10)
      }
   }
}

#Preview {
   ContentView()
}

輸出