SwiftUI - 繪製圓角矩形

---

---

圓角矩形是一個矩形，但具有圓角。此形狀透過定義其角的曲率半徑來建立。在 UI 中，圓角矩形用於設計欄位、按鈕、圖示等，因為與矩形相比，它在視覺上更具吸引力。SwiftUI 提供了一個內建函式來建立圓角矩形，但在這裡我們將建立一個沒有任何內建函式的圓角矩形。

在 SwiftUI 中繪製圓角矩形

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

語法

以下是語法 -

addLine(to end: CGPoint)

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

在 SwiftUI 中繪製圓角矩形的步驟

按照以下步驟在 SwiftUI 中繪製圓角矩形 -

步驟 1：定義自定義形狀

要繪製自定義圓角矩形，我們需要建立一個符合 Shape 協議的結構體。在此結構體中，我們將定義如何建立圓角矩形。或者我們可以說定義 path(in:) 方法

struct RoundedRectangle: Shape {
   var cRadius: CGFloat
   var corners: UIRectCorner

   func path(in rRect: CGRect) -> Path {
      let xpath = UIBezierPath(
         roundedRect: rRect,
         byRoundingCorners: corners,
         cornerRadii: CGSize(width: cRadius, height: cRadius)
      )
      return Path(xpath.cgPath)
   }
}

步驟 2：建立檢視

現在我們在 SwiftUI 檢視中使用自定義圓角矩形。它將顯示自定義圓角矩形的外觀。

struct ContentView: View {
   var body: some View {
      RoundedRectangle(cRadius: 30, corners: [.topLeft, .topRight, .bottomLeft, .bottomRight])    
   }
}

步驟 3：新增其他自定義

我們還可以包含其他自定義，例如描邊、填充、陰影、疊加文字等，在圓角矩形中。

struct ContentView: View {
   var body: some View {
      RoundedRectangle(cRadius: 30, corners: [.topLeft, .topRight, .bottomLeft, .bottomRight])
         .fill(Color.blue)
         .frame(width: 200, height: 100)
         .padding()
   }
}

示例 1

以下 SwiftUI 程式用於建立實心的自定義圓角矩形。

import SwiftUI

struct RoundedRectangle: Shape {
   var cRadius: CGFloat
   var corners: UIRectCorner

   func path(in rRect: CGRect) -> Path {
      let xpath = UIBezierPath(
         roundedRect: rRect,
         byRoundingCorners: corners,
         cornerRadii: CGSize(width: cRadius, height: cRadius)
      )
      return Path(xpath.cgPath)
   }
}
struct ContentView: View {
   var body: some View {
      RoundedRectangle(cRadius: 30, corners: [.topLeft, .topRight, .bottomLeft, .bottomRight])
         .fill(Color.blue)
         .frame(width: 200, height: 100)
         .padding()
   }
}

#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於繪製自定義圓角矩形。在這裡，我們將建立圓角矩形的每條線和每個角。

import SwiftUI

struct RoundedRectangle: Shape {
   var topLeftRadius: CGFloat
   var topRightRadius: CGFloat
   var bottomLeftRadius: CGFloat
   var bottomRightRadius: CGFloat

   func path(in rectangle: CGRect) -> Path {
      var xpath = Path()
      // Define the starting point of the rectangle
      let sPoint = CGPoint(x: rectangle.minX + topLeftRadius, y: rectangle.minY)

      // Move to the starting point
      xpath.move(to: sPoint)

      // Top Right Side
      xpath.addLine(to: CGPoint(x: rectangle.maxX - topRightRadius, y: rectangle.minY))
      xpath.addArc(
	     center: CGPoint(x: rectangle.maxX - topRightRadius, 
	     y: rectangle.minY + topRightRadius),
         radius: topRightRadius, startAngle: Angle(degrees: -90),
         endAngle: Angle(degrees: 0), clockwise: false
      )

      // Right Bottom Side
      xpath.addLine(to: CGPoint(x: rectangle.maxX, y: rectangle.maxY - bottomRightRadius))
      xpath.addArc(
	     center: CGPoint(x: rectangle.maxX - bottomRightRadius, y: rectangle.maxY - bottomRightRadius),
         radius: bottomRightRadius,
         startAngle: Angle(degrees: 0),
         endAngle: Angle(degrees: 90),
         clockwise: false
      )

      // Bottom Left Side
      xpath.addLine(to: CGPoint(x: rectangle.minX + bottomLeftRadius, y: rectangle.maxY))
      xpath.addArc(center: CGPoint(x: rectangle.minX + bottomLeftRadius, y: rectangle.maxY - bottomLeftRadius),
         radius: bottomLeftRadius,
         startAngle: Angle(degrees: 90),
         endAngle: Angle(degrees: 180),
         clockwise: false)

        // Top Left side
        xpath.addLine(to: CGPoint(x: rectangle.minX, y: rectangle.minY + topLeftRadius))
        xpath.addArc(center: CGPoint(x: rectangle.minX + topLeftRadius, y: rectangle.minY + topLeftRadius),
           radius: topLeftRadius,
           startAngle: Angle(degrees: 180),
           endAngle: Angle(degrees: 270),
           clockwise: false)

        return xpath
   }
}

struct ContentView: View {
   var body: some View {
      RoundedRectangle(topLeftRadius: 20, topRightRadius: 20, bottomLeftRadius: 20, bottomRightRadius: 20)
         .fill(Color.purple)
        .frame(width: 300, height: 200)
   }
}

輸出

要建立描邊圓角矩形，我們將使用 .stroke 修飾符。在這裡，我們只會對檢視部分進行更改，其餘程式碼與上面相同

struct ContentView: View {
   var body: some View {
      RoundedRectangle(topLeftRadius: 20, topRightRadius: 20, bottomLeftRadius: 20, bottomRightRadius: 20)
         .stroke(Color.red, lineWidth: 3)
         .frame(width: 300, height: 200)
   }
}

輸出

使用以上程式碼，我們可以根據需要自定義圓角矩形。在這裡，我們更改每個角的大小，它將建立一個不均勻的圓角矩形。

struct ContentView: View {
   var body: some View {
      RoundedRectangle(topLeftRadius: 50, topRightRadius: 20, bottomLeftRadius: 20, bottomRightRadius: 50)
         .stroke(Color.red, lineWidth: 3)
         .frame(width: 300, height: 200)
   }
}

輸出