SwiftUI - Drawing a Rectangle

---

---

A rectangle is a quadrilateral shape in geometry. It has four sides where opposite sides are equal in length and parallel with each other. All the angles of the rectangle are right angles. It is commonly used to create various objects like doors, sheets, trays, etc.

A rectangle shape in SwiftUI is used to define the boundaries of various UI components like buttons, text boxes, image frames, containers, panels, etc. Or we can say that a rectangle is a shape view that is used to display a rectangular area on the screen. We can customize the appearance of the rectangle according to our needs by adjusting the size, position, corners, color, etc.

Drawing Rectangle in SwiftUI

As we know a rectangle is created by connecting four lines, where the opposite sides are parallel to each other and have the same length. So in SwiftUI, we will use addLine(to:) method to draw a rectangular shape. This method adds a straight line segment from the current point to the given point(end point).

Syntax

Following is the syntax −

addLine(to end: CGPoint)

This function takes one parameter that is end. It represents the location of the end point of the line segment in the user space coordinates.

Steps to Draw a Rectangle in SwiftUI

Follow the following steps to draw rectangle in SwiftUI −

Step 1: Initialize Path

To create a rectangle first we need to initialize Path and provide detailed instructions in the closure. Using path we can create simple or complex graphics by specifying a series of connected points and lines.

Path() {}

Step 2: Moving to the specified coordinates

Now to start drawing the rectangle we need to move to the starting point of the rectangle so for that we will use the move(to:) method. It is used to reach the current point/starting point of the rectangle/shape.

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

Step 3: Drawing rectangle

Now we call the addLine(to:) method to draw lines from the given point to point to create a rectangular shape.

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

Step 4: Filling color

By default the rectangle is created in black color so using the .fill modifier we can change the color of the rectangle

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)

Example 1

The following SwiftUI program is used to draw a solid rectangle in orange color.

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

Output

Example 2

The following SwiftUI program is used to draw a stroke rectangle. That means it contains only the boundary of the rectangle.

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

Output

Here we do not draw a line to connect coordinates(50, 200) and (50, 50), it will show an open-ended path. So to close this path we will call the closeSubpath() method at the end of the Path closure. It will automatically connect the current point with the point of origin.

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

Output