SwiftUI-Drawing Polygon

A Polygon is a closed shape with a finite number of straight sides. They are classified according to the number of sides they have such as Triangle(3 sides), Pentagon(5 sides), Quadrilateral(4 sides), Hexagon(6 sides), Octagon(8 sides), Nonagone(9 sides)etc.

SwiftUI does not provide any built-in method to create a polygon. So we will create a custom polygon with the help of the addLine() method. This method adds a straight line segment from the current point to the given point(endpoint).

Syntax

Following is the syntax−

addLine(to end: CGPoint)

It takes only one parameter that is, end to represent the location of endpoint of the line segment in the user space coordinates

Steps to Draw a Polygon in SwiftUI

Follow the following steps to draw a polygon in SwiftUI −

Step 1: Define the Custom Shape

To draw a polygon, we need to create a struct that conforms to Shape protocol. Here we will define how the polygon will be created inside the path(in:) method.

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
}

Step 2: Create a View

Now we use the custom polygon in a SwiftUI view. It will show how the custom polygon will look.

struct ContentView: View {
   var body: some View {
      Polygon(side: 6)
   }
}

Step 3: Adding Additional Customization

We can also include additional customization like stroke, fill, shadow, overlay text etc. in the polygon.

struct ContentView: View {
   var body: some View {
      Polygon(side: 6)
         .stroke(Color.purple, lineWidth: 5)
         .frame(width: 300, height: 300)
         .padding()
   }
}

Example

The Following SwiftUI program is used to draw a simple polygon.

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

Output

We can also customize our polygon by using various modifiers such as .fill(), frame(), .shadow(), .overlay, etc to make it more attractive. Here we draw a solid polygon with shadow so we will use the .fill() modifier to make a solid polygon and shadow() for applying the shadow effect

struct ContentView: View {
   var body: some View {
      Polygon(side: 7)
         .fill(Color.mint)
         .frame(width: 300, height: 300)
         .shadow(radius: 10)
   }
}

Output