SwiftUI - Drawing a Star

A Star is a shape resembling the star in the universe. It is a closed shape created by connecting non-adjacent vertices of a regular polygon. In SwiftUI, a star shape is used in the rating system to represent ratings, in the bookmark system to mark favorite items, and it can also be used to indicate various statuses or achievements.

It is also used in navigation, etc. It also helps in creating engaging and attractive user interfaces for Apple's apps.

Drawing Star Shape in SwiftUI

SwiftDoesnot provide any built-in method to create a star shape directly so here we will discuss how to create a custom star shape with the help of path(in:) and addLine(to:) methods. Here the path(in:) method is used to calculate the points of the star and the addLine(to:) method is used to connect them by drawing lines.

Syntax

Following is the syntax −

addLine(to end: CGPoint)

Parameter

end: This parameter represents the location of the end point of the line segment in the user space coordinates.

Follow the steps to draw star in SwiftUI −

Steps to Draw Star in SwiftUI

Step 1: Define the shape of a star

Create a star shape struct that conforms to the Shape protocol. Inside this structure, we implement the path(in:) and addLine(to:) methods to find the points and connect them.

struct MyStar: Shape {
   func path(in rect: CGRect) -> Path {
      let Scenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
      let StarVertices = 5
      let SinnerRadius = rect.width / 5
      let SouterRadius = rect.width / 2

      var path = Path()

      let AIncrement = .pi * 2 / CGFloat(StarVertices)
      let halfAngleIncrement = AIncrement / 2

      for p in 0..
Step 2: Specify the star shape in the view
Now insert the star shape struct in the ContentView to display the shape on the screen
struct ContentView: View {
   var body: some View {
      VStack {
         MyStar()
      }
   }
}

Step 3: Customize Star Shape
We can customize star shape with the help of various modifiers provided by SwiftUI such as fill(), frame(), background(), etc.
struct ContentView: View {
   var body: some View {
      VStack {
         MyStar()
           .fill(Color.pink)
           .frame(width: 150, height: 150)
           .background(Color.yellow)
           .clipShape(Circle())
      }
   }
}

Example 1
The following SwiftUI program is used to draw a star shape with a circle background.
import SwiftUI

// Star shape
struct MyStar: Shape {

  func path(in rect: CGRect) -> Path {
    let Scenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
    let StarVertices = 5
    let SinnerRadius = rect.width / 5
    let SouterRadius = rect.width / 2

    var path = Path()

    let AIncrement = .pi * 2 / CGFloat(StarVertices)
    let halfAngleIncrement = AIncrement / 2

    for p in 0..
Output

Example 2
The following SwiftUI program is used to draw multiple star shapes with different numbers of vertices.  
import SwiftUI

// Star shape
struct Star: Shape {
   var vertex: Int

   func path(in rect: CGRect) -> Path {
      guard vertex >= 2 else { return Path() }

      let Scenter = CGPoint(x: rect.width / 2, y: rect.height / 2)
      let Sangle = 2 * .pi / Double(vertex)
      let Sradius = min(rect.width, rect.height) / 2

      var path = Path()
      var firstPoint = true

      for i in 0..
Output

   

    
      Print Page
   
   

   
   

   
      Previous
   
   
   
   
Next
   
   
   
   

   

      

         
Advertisements