path on Software Development Notes

Create a color pencil in SwiftUI

Eric Callanan — Sunday, 14 May 2023

SwiftUI can be used to simulate real-world objects, such as selecting a color by selecting a specific colored pencil rather than from a colored rectangle. This can provide a more intuitive user experience, especially in a drawing or note-taking app. This article defines a SwiftUI view for a color pencil using the Path and Shape protocols for the components of the pencil.

Initial Pencil

Start with a pencil composed of three shapes for the pencil tip, the pencil timber and the pencil body. Each of these shapes are defined as Path objects to fit inside their containing frame. First define the x,y coordinates of the desired points inside a 1.0 by 1.0 grid. Then simply multiply the containing rect maxX and maxY to get the specific points. The three shapes are combined together in a ZStack to display the pencil.

PencilTipShape

 1struct PencilTipShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let path = Path { path in
 4            path.move(to: CGPoint(x: 0.470 * rect.maxX, y: 0.035 * rect.maxY))
 5            path.addLine(to: CGPoint(x: 0.530 * rect.maxX, y: 0.020 * rect.maxY))
 6            path.addLine(to: CGPoint(x: 0.670 * rect.maxX, y: 0.106 * rect.maxY))
 7            path.addCurve(to: CGPoint(x: 0.330 * rect.maxX, y: 0.106 * rect.maxY),
 8                          control1: CGPoint(x: 0.580 * rect.maxX, y: 0.120 * rect.maxY),
 9                          control2: CGPoint(x: 0.420 * rect.maxX, y: 0.120 * rect.maxY))
10            path.closeSubpath()
11        }
12        return path
13    }
14}

PencilTimberShape

 1struct PencilTimberShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let path = Path { path in
 4            path.move(to: CGPoint(x: 0.330 * rect.maxX, y: 0.106 * rect.maxY))
 5            path.addCurve(to: CGPoint(x: 0.670 * rect.maxX, y: 0.106 * rect.maxY),
 6                          control1: CGPoint(x: 0.420 * rect.maxX, y: 0.120 * rect.maxY),
 7                          control2: CGPoint(x: 0.580 * rect.maxX, y: 0.120 * rect.maxY))
 8            path.addLine(to: CGPoint(x: 0.980 * rect.maxX, y: 0.270 * rect.maxY))
 9            path.addCurve(to: CGPoint(x: 0.020 * rect.maxX, y: 0.270 * rect.maxY),
10                          control1: CGPoint(x: 0.700 * rect.maxX, y: 0.320 * rect.maxY),
11                          control2: CGPoint(x: 0.300 * rect.maxX, y: 0.320 * rect.maxY))
12            path.closeSubpath()
13        }
14        return path
15    }
16}

PencilBodyShape

 1struct PencilBodyShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let path = Path { path in
 4            path.move(to: CGPoint(x: 0.020 * rect.maxX, y: 0.270 * rect.maxY))
 5            path.addCurve(to: CGPoint(x: 0.980 * rect.maxX, y: 0.270 * rect.maxY),
 6                          control1: CGPoint(x: 0.300 * rect.maxX, y: 0.320 * rect.maxY),
 7                          control2: CGPoint(x: 0.700 * rect.maxX, y: 0.320 * rect.maxY))
 8            path.addLine(to: CGPoint(x: 0.980 * rect.maxX, y: 0.900 * rect.maxY))
 9            path.addCurve(to: CGPoint(x: 0.020 * rect.maxX, y: 0.900 * rect.maxY),
10                          control1: CGPoint(x: 0.700 * rect.maxX, y: 0.950 * rect.maxY),
11                          control2: CGPoint(x: 0.300 * rect.maxX, y: 0.950 * rect.maxY))
12            path.closeSubpath()
13        }
14        return path
15    }
16}

GrayPencilView

 1struct GrayPencilView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Gray Pencil")
 5                .font(.largeTitle)
 6            
 7            ZStack {
 8                PencilTipShape()
 9                    .fill(.gray)
10                PencilTimberShape()
11                    .fill(.orange.opacity(0.3))
12                PencilBodyShape()
13                    .fill(.red.opacity(0.9))
14            }
15            .frame(width: 100, height: 400)
16        }
17    }
18}

Pencil defined using three shapes in SwiftUI

Color Pencil

Create a color pencil SwiftUI view that takes a Color as a parameter and is composed of the three pencil component shapes. The color of the tip and the body are set to the specified color. The color of the timber shape is also changed to remove the opacity as this would not have a consistent color depending on the background.

ColorPencilView1

 1struct ColorPencilView1: View {
 2    var color: Color
 3    
 4    var body: some View {
 5        ZStack {
 6            PencilTipShape()
 7                .fill(color)
 8            PencilTimberShape()
 9                .fill(Color(hue: 0.07, saturation: 0.4, brightness: 0.9))
10            PencilBodyShape()
11                .fill(color)
12        }
13    }
14}

BluePencilView

 1struct BluePencilView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Blue Pencil")
 5                .font(.largeTitle)
 6            
 7            ColorPencilView1(color: .blue)
 8                .frame(width: 100, height: 400)
 9        }
10    }
11}

Color pencil view that takes a color and creates the pencil within the frame

Use Linear Gradient

The color pencil is looking better, but it appears a bit flat. The appearance of 3D can be added by using a color gradient with the pencil getting brighter at one point. A linear gradient can be created with variations of the specified color using getHue function of UIColor as described in Convert color from RGB to HSB in Swift. The gradient is created using the same Hue and changing the Saturation and Brightness to give the impression of light being reflected off the round body of the pencil.

ColorPencilView

 1struct ColorPencilView: View {
 2    var color: Color
 3    
 4    func getColorGradient(_ col: Color) -> LinearGradient {
 5        var hue: CGFloat  = 0.0
 6        var saturation: CGFloat = 0.0
 7        var brightness: CGFloat = 0.0
 8        var alpha: CGFloat = 0.0
 9        
10        let uiColor = UIColor(col)
11        uiColor.getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha)
12        
13        return LinearGradient(
14            colors: [
15                Color(hue: hue, saturation: saturation * 1.0, brightness: brightness * 0.4),
16                Color(hue: hue, saturation: saturation * 1.0, brightness: brightness * 0.8),
17                Color(hue: hue, saturation: saturation * 1.0, brightness: brightness * 1.0),
18                Color(hue: hue, saturation: saturation * 0.6, brightness: brightness * 1.0),
19                Color(hue: hue, saturation: saturation * 0.8, brightness: brightness * 0.9)
20            ],
21            startPoint: .leading,
22            endPoint: .trailing)
23    }
24    
25    var body: some View {
26        ZStack {
27            PencilTipShape()
28                .fill(getColorGradient(color))
29            PencilTimberShape()
30                .fill(Color(hue: 0.07, saturation: 0.4, brightness: 0.9))
31            PencilBodyShape()
32                .fill(getColorGradient(color))
33        }
34    }
35}

BlueGradientPencilView

 1struct BlueGradientPencilView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Blue Pencil")
 5                .font(.largeTitle)
 6            Text("Color gradient")
 7                .font(.title)
 8
 9            HStack {
10                ColorPencilView(color: .blue)
11                    .frame(width: 100, height: 400)
12            }
13        }
14    }
15}

Add color gradient to pencil based on specified color using Hue

Rainbow Pencils

Finally we create a set of color pencils for the seven colors of the rainbow.

ColorPencilSetView

 1struct ColorPencilSetView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Rainbow Pencil Set")
 5                .font(.largeTitle)
 6
 7            HStack {
 8                ColorPencilView(color: .red)
 9                ColorPencilView(color: .orange)
10                ColorPencilView(color: .yellow)
11                ColorPencilView(color: .green)
12                ColorPencilView(color: .blue)
13                ColorPencilView(color: Color(hue: 0.773, saturation: 1.0, brightness: 0.51))
14                ColorPencilView(color: Color(hue: 0.771, saturation: 1.0, brightness: 1.00))
15            }
16            .frame(width: 400, height: 300)
17        }
18    }
19}

Create a set of color pencils in SwiftUI

Conclusion

The color pencil is defined as being composed of three shapes for the pencil tip, the pencil timber and the pencil body. A 3D effect is added by getting the hue of the specified color and creating a linear color gradient across the body of the pencil. There are numerous improvements that could be done to the pencil such as making the edges of the timber section more jagged, adding an angled light reflection to the colored tip of the pencil and so on.

The source code for ColorPencilsApp is available on GitHub.

Better performance with canvas in SwiftUI

Eric Callanan — Sunday, 13 Feb 2022

It is said that use of Canvas to create complex shapes can provide better performance in SwiftUI. This article compares performance of scrolling through multiple instances of the same card pattern created using shape, canvas or image.

Create a card pattern using a Shape

All of the patterns are build using the Diamond shape created in Create patterns from basic shapes in SwiftUI. The DiamondShape conforms to the Shape protocol and implements the path function to create a diamond shape inside the containing rectangle. There is one correction to the original diamond shape, in the offsetPoint function, to adjust for the origin of the containing rectangle not being at (0,0).

 1struct DiamondShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let size = min(rect.width, rect.height)
 4        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 5        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 6        
 7        func offsetPoint(p: CGPoint) -> CGPoint {
 8            return CGPoint(x: p.x + xOffset + rect.origin.x, y: p.y+yOffset + rect.origin.y)
 9        }
10
11        let path = Path { path in
12            path.move(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.50))))
13            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: 0)),
14                              control: offsetPoint(p: CGPoint(x: (size * 0.40), y: (size * 0.40))))
15            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.50))),
16                              control: offsetPoint(p: CGPoint(x: (size * 0.60), y: (size * 0.40))))
17            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: size)),
18                              control: offsetPoint(p: CGPoint(x: (size * 0.60), y: (size * 0.60))))
19            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.50))),
20                              control: offsetPoint(p: CGPoint(x: (size * 0.40), y: (size * 0.60))))
21            path.closeSubpath()
22        }
23        return path
24    }
25}

The DiamondCardView is created by arranging rows and columns of the diamond shapes using vertical and horizontal stacks.

 1struct DiamondCardView: View {
 2    var rows :Int
 3    var cols: Int
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let width = gr.size.width / CGFloat(cols)
 8            let height = gr.size.height / CGFloat(rows)
 9            
10            VStack(spacing:0) {
11                ForEach(0..<rows) { i in
12                    let rowCols = (i%2==0) ? cols : cols - 1
13                    HStack(spacing:0) {
14                        Group {
15                            ForEach(0..<rowCols) { _ in
16                                DiamondShape()
17                                    .fill(Color(red: 250/255, green: 100/255, blue: 90/255))
18                                    .frame(width: width, height: height)
19                            }
20                        }
21                    }
22                }
23            }
24        }
25    }
26}

The card pattern is further enhanced by adding borders and rounding the corners.

 1struct SingleShapeView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                Text("Card from Shape")
 9                    .font(.title)
10                    .fontWeight(.bold)
11                    .padding(.vertical, 30)
12                
13                Group {
14                    DiamondCardView(rows: 21, cols: 7)
15                        .padding(40)
16                        .frame(width: 250, height: 430)
17                        .background(Color(red: 30/255, green: 40/255, blue: 60/255))
18                        .cornerRadius(30)
19                        .overlay(RoundedRectangle(cornerRadius: 40)
20                                    .stroke(Color(red: 0.93, green: 0.94, blue: 0.77), lineWidth: 50)
21                                    .cornerRadius(30))
22                        .overlay(RoundedRectangle(cornerRadius: 20)
23                                    .stroke(Color(red: 250/255, green: 100/255, blue: 90/255), lineWidth: 20)
24                                    .cornerRadius(15)
25                                    .padding(25))
26                        .overlay(RoundedRectangle(cornerRadius: 30)
27                                    .stroke(.black, lineWidth: 2)
28                                .cornerRadius(30))
29                }
30                .rotationEffect(.degrees(10))
31                
32                Spacer()
33            }
34        }
35    }
36}

Define card pattern using Shapes

Define card pattern using Shapes

Create the card pattern using Canvas

As discussed in Using canvas in SwiftUI, the Canvas view provides a mechanism to draw in SwiftUI in an efficient manner. The canvas uses GraphicsContext and size to draw immediately within the containing rectangle. The same card pattern as above is created using a canvas to layout the individual diamond shapes. In addition, the same DiamondShape is used in the Canvas by accessing the path function of the shape and passing the containing rectangle.

 1struct SingleCanvasView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                Text("Card from Canvas")
 9                    .font(.title)
10                    .fontWeight(.bold)
11                    .padding(.vertical, 30)
12                
13                Canvas { context, size in
14                    let w = size.width
15                    let h = size.height
16                    let rows = 21
17                    let cols = 7
18                    
19                    for r in 0..<rows {
20                        for c in 0..<cols {
21                            let x = w/CGFloat(cols) * CGFloat(c)
22                            let y = h/CGFloat(rows) * CGFloat(r)
23                            context.fill(
24                                DiamondShape().path(in: CGRect(
25                                    x: x,
26                                    y: y,
27                                    width: w/CGFloat(cols),
28                                    height: h/CGFloat(rows))),
29                                with: .color(red: 250/255, green: 100/255, blue: 90/255))
30                        }
31                    }
32                }
33                .padding(40)
34                .background(Color(red: 30/255, green: 40/255, blue: 60/255))
35                .frame(width: 250, height: 430)
36                .cornerRadius(30)
37                .overlay(RoundedRectangle(cornerRadius: 40)
38                            .stroke(Color(red: 0.93, green: 0.94, blue: 0.77), lineWidth: 50)
39                            .cornerRadius(30))
40                .overlay(RoundedRectangle(cornerRadius: 20)
41                            .stroke(Color(red: 250/255, green: 100/255, blue: 90/255), lineWidth: 20)
42                            .cornerRadius(15)
43                            .padding(25))
44                .overlay(RoundedRectangle(cornerRadius: 30)
45                            .stroke(.black, lineWidth: 2)
46                            .cornerRadius(30))
47                .rotationEffect(.degrees(10))
48                
49                Spacer()
50            }
51        }
52    }
53}

Define card pattern using Canvas

Define card pattern using Canvas

ScrollView with cards from Shape

Individually, the above views display OK and there appears to be no performance differences. A ScrollView is created containing 50 of the DiamondCardView to stress out the system and look for performance issues.

 1struct MultipleShapeView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            ScrollView {
 8                ForEach(1...50, id: \.self) { _ in
 9                    CardShapeView()
10                }
11            }
12            .navigationTitle("50 Shape Cards")
13        }
14    }
15}
16
17
18struct CardShapeView: View {
19    var body: some View {
20        DiamondCardView(rows: 7, cols: 21)
21            .padding(30)
22            .frame(width: 300, height: 200)
23            .background(Color(red: 30/255, green: 40/255, blue: 60/255))
24            .cornerRadius(30)
25            .overlay(RoundedRectangle(cornerRadius: 40)
26                        .stroke(Color(red: 0.93, green: 0.94, blue: 0.77), lineWidth: 50)
27                        .cornerRadius(30))
28            .overlay(RoundedRectangle(cornerRadius: 20)
29                        .stroke(Color(red: 250/255, green: 100/255, blue: 90/255), lineWidth: 10)
30                        .cornerRadius(15)
31                        .padding(20))
32            .overlay(RoundedRectangle(cornerRadius: 30)
33                        .stroke(.black, lineWidth: 2)
34                        .cornerRadius(30))
35    }
36}

Multiple card pattern defined using Shape

Multiple card pattern defined using using Shape

ScrollView with cards from Canvas

A similar ScrollView is created containing 50 of the CardCanvasView to stress out the system and look for performance issues.

 1struct MultipleCanvasView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            ScrollView {
 8                ForEach(1...50, id: \.self) { i in
 9                    CardCanvasView()
10                }
11            }
12            .navigationTitle("50 Canvas Card")
13        }
14    }
15}
16
17
18struct CardCanvasView: View {
19    var body: some View {
20        VStack {
21            Canvas { context, size in
22                let w = size.width
23                let h = size.height
24                let rows = 7
25                let cols = 21
26                
27                for r in 0..<rows {
28                    for c in 0..<cols {
29                        let x = w/CGFloat(cols) * CGFloat(c)
30                        let y = h/CGFloat(rows) * CGFloat(r)
31                        context.fill(
32                            DiamondShape().path(in: CGRect(x: x, y: y, width: w/CGFloat(cols), height: h/CGFloat(rows))),
33                            with: .color(red: 250/255, green: 100/255, blue: 90/255))
34                    }
35                }
36            }
37            .padding(30)
38            .frame(width: 300, height: 200)
39            .background(Color(red: 30/255, green: 40/255, blue: 60/255))
40            .cornerRadius(30)
41            .overlay(RoundedRectangle(cornerRadius: 40)
42                        .stroke(Color(red: 0.93, green: 0.94, blue: 0.77), lineWidth: 50)
43                        .cornerRadius(30))
44            .overlay(RoundedRectangle(cornerRadius: 20)
45                        .stroke(Color(red: 250/255, green: 100/255, blue: 90/255), lineWidth: 10)
46                        .cornerRadius(15)
47                        .padding(20))
48            .overlay(RoundedRectangle(cornerRadius: 30)
49                        .stroke(.black, lineWidth: 2)
50                        .cornerRadius(30))
51        }
52    }
53}

Multiple card pattern defined using Canvas

Multiple card pattern defined using Canvas

ScrollView with cards from Image

Finally, a ScrollView is created containing 50 images for the cards to compare performance to that of using the shapes and the canvas. The image is created from a screenshot of one of the cards above and added to the assets.

 1struct MultipleImageView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            ScrollView {
 8                ForEach(1...50, id: \.self) { _ in
 9                    Image("card-background")
10                        .resizable()
11                        .scaledToFill()
12                        .clipShape(RoundedRectangle(cornerRadius: 40))
13                        .frame(width: 310, height: 200)
14                }
15            }
16            .navigationTitle("50 Image Card")
17        }
18    }
19}

Card pattern image

Card pattern image

Multiple card with image as background

Multiple card with image as background

Review performance

There are a number of ways of measuring performance, including automated performance tests, which I'll dig into in another article. In this app we'll just run the application and look at the CPU and Memory usage in Xcode. It can be seen that the ScrollView with the 50 cards created using shapes for each diamond and laying them out in Stacks uses significantly more memory to load. It also uses significantly more CPU when scrolling the view up and down. The cards created with canvas use significantly less memory to load and less CPU usage when scrolling up and down. Using an image for the cards performs the best, but only slightly better than use of canvas.

Increased memory and CPU usage with card pattern created with Shape

Increased memory and CPU usage with card pattern created with Shape

Increased memory usage with card pattern created with Shape

Increased memory usage with card pattern created with Shape

Conclusion

A ScrollView containing 50 instances of the same card may not be the most realistic scenario, but it illustrates the point of performance differences in creating these views. Using the canvas to layout multiple shapes such as diamonds results in much better performance than laying out multiple shapes in a view. This can be seen in the responsiveness of the scrolling and the memory and CPU usage. If these shape in the app are static, then use of an image provides slightly better performance than use of canvas. The use of canvas performed almost as well as the use of images, so if the content needs to be dynamic, then a canvas maybe the best option.

Animate spinning cog shape in SwiftUI

Eric Callanan — Sunday, 06 Feb 2022

I discovered, when playing around with the rounded-corner star shape, that the same basic shape could be used to create a cog shape. This article demonstrates the creation of the cog shape and the use of timelineview to animate its rotation in SwiftUI.

Define path for cog shape

Building on the Star shape with rounded corners created in Star with rounded corners in SwiftUI a Path cog shape is defined by modifying the star shape path. The inner and outer radii are set to be equal, so the cog teeth will be determined by the corner radius. This is set relative to the width of the containing rectangle and the number of points in the cog. These values can be played around with, to create a cog that looks right.

 1    func cogPath(in rect: CGRect, points: Int, angle: Double) -> Path {
 2        let center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 3        let outerRadius = Double(min(rect.width,rect.height)) * 0.4
 4        let innerRadius = outerRadius * 1.0
 5        let offsetAngle = Double.pi * (-0.5) + angle
 6        let cornerRadius = (rect.width / Double(points)) * 0.66
 7        
 8        var cogSegments:[Segment] = []
 9        for i in 0..<(points){
10            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
11            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
12            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
13            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
14            
15            let segment = Segment(
16                outerCenter: CGPoint(x: outerPoint.x + center.x,
17                                     y: outerPoint.y + center.y),
18                outerAngle: angle1,
19                outerRadius: cornerRadius,
20                innerCenter: CGPoint(x: innerPoint.x + center.x,
21                                     y: innerPoint.y + center.y),
22                innerAngle: angle2)
23            cogSegments.append(segment)
24        }
25        
26        let path = Path() { path in
27            for (n, seg) in cogSegments.enumerated() {
28                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
29                path.addArc(center: seg.outerCenter,
30                            radius: seg.outerRadius,
31                            startAngle: Angle(radians: seg.outerStartAngle),
32                            endAngle: Angle(radians: seg.outerEndAngle),
33                            clockwise: false)
34                path.addLine(to: seg.line2)
35                path.addArc(center: seg.innerCenter,
36                            radius: seg.outerRadius,
37                            startAngle: Angle(radians: seg.innerStartAngle),
38                            endAngle: Angle(radians: seg.innerEndAngle),
39                            clockwise: true)
40            }
41            path.closeSubpath()
42        }
43        return path
44    }

No changes are made to the Segment struct.

 1func Cartesian(length:Double, angle:Double) -> CGPoint {
 2    return CGPoint(x: length * cos(angle), y: length * sin(angle))
 3}
 4
 5struct Segment {
 6    let outerCenter: CGPoint
 7    let outerAngle: Double
 8    let outerRadius: Double
 9    let innerCenter: CGPoint
10    let innerAngle: Double
11    
12    var line: CGPoint {
13        get {
14            let pt = Cartesian(length: outerRadius, angle: outerStartAngle)
15            return CGPoint(x: pt.x + outerCenter.x, y: pt.y + outerCenter.y)
16        }
17    }
18    
19    var line2: CGPoint {
20        get {
21            let pt = Cartesian(length: outerRadius, angle: innerStartAngle)
22            return CGPoint(x: pt.x + innerCenter.x, y: pt.y + innerCenter.y)
23        }
24    }
25    
26    var outerStartAngle: Double {
27        get { self.outerAngle - (Double.pi * (0.45)) }
28    }
29    var outerEndAngle: Double {
30        get { self.outerAngle + (Double.pi * (0.45)) }
31    }
32    
33    var innerStartAngle: Double {
34        get { self.innerAngle - (Double.pi * (0.7)) }
35    }
36    var innerEndAngle: Double {
37        get { self.innerAngle + (Double.pi * (0.7)) }
38    }
39}

The cog path is added to a canvas as described in Using canvas in SwiftUI. A TimelineView is used to wrap the view containing the canvas with a schedule of AnimationTimelineSchedule. The animation schedule will update the canvas as quickly as the UI can display changes. The angle calculated is passed into the cogPath function and the cog path is adjusted by this angle.

 1   TimelineView(.animation) { timeline in
 2       VStack {
 3           let now = timeline.date.timeIntervalSinceReferenceDate
 4           let angle = Angle.degrees(now.remainder(dividingBy: 8)*45)
 5           
 6           Spacer().frame(height:30)
 7           
 8           Canvas { context, size in
 9               context.fill(
10                   cogPath(in: CGRect(origin: .zero,
11                                       size: CGSize(width: size.width, height: size.height)),
12                            points: 15,
13                            angle: angle.radians),
14                   with: .color(.blue))
15           }
16           .frame(width: 300, height: 400)
17           
18           Spacer()
19       }
20   }

Starter cog shape on a Canvas

Starter cog shape on a Canvas

Animated cog shape on a canvas

Animated cog shape on a canvas

Separate into Cog Shape struct

As the path for shapes becomes more complicated, having the function inside the body view makes the code look ugly and is harder to modify and maintain. This is resolved by separating out the cog shape into its own struct and then accessing the path from the shape in the graphicsContext fill function.

 1struct CogShape: Shape {
 2    var points: Int
 3    var rotationAngle: Angle
 4    
 5    func path(in rect: CGRect) -> Path {
 6        let center = CGPoint(x: rect.width/2.0 + rect.origin.x , y: rect.height/2.0 + rect.origin.y)
 7        let outerRadius = Double(min(rect.width,rect.height)) * 0.4
 8        let innerRadius = outerRadius * 1.0
 9        let offsetAngle = Double.pi * (-0.5) + rotationAngle.radians
10        let cornerRadius = (rect.width / Double(points)) * 0.66
11        
12        var starSegments:[Segment] = []
13        for i in 0..<(points){
14            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
15            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
16            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
17            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
18            
19            let segment = Segment(
20                outerCenter: CGPoint(x: outerPoint.x + center.x,
21                                     y: outerPoint.y + center.y),
22                outerAngle: angle1,
23                outerRadius: cornerRadius,
24                innerCenter: CGPoint(x: innerPoint.x + center.x,
25                                     y: innerPoint.y + center.y),
26                innerAngle: angle2)
27            starSegments.append(segment)
28        }
29        
30        let path = Path() { path in
31            for (n, seg) in starSegments.enumerated() {
32                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
33                path.addArc(center: seg.outerCenter,
34                            radius: seg.outerRadius,
35                            startAngle: Angle(radians: seg.outerStartAngle),
36                            endAngle: Angle(radians: seg.outerEndAngle),
37                            clockwise: false)
38                path.addLine(to: seg.line2)
39                path.addArc(center: seg.innerCenter,
40                            radius: seg.outerRadius,
41                            startAngle: Angle(radians: seg.innerStartAngle),
42                            endAngle: Angle(radians: seg.innerEndAngle),
43                            clockwise: true)
44            }
45            path.closeSubpath()
46        }
47        return path
48    }
49}

The CogShape is created in the Canvas view and the path of the shape is retrieved.

 1    TimelineView(.animation) { timeline in
 2        VStack {
 3            let now = timeline.date.timeIntervalSinceReferenceDate
 4            let angle = Angle.degrees(now.remainder(dividingBy: 8)*45)
 5                                
 6            Canvas { context, size in
 7                context.fill(
 8                    CogShape(points: 15, rotationAngle: angle)
 9                        .path(in: CGRect(origin: .zero,
10                                         size: CGSize(
11                                            width: size.width,
12                                            height: size.height))),
13                    with: .color(.blue))
14            }
15            .frame(width: 300, height: 400)
16            
17            Spacer()
18        }
19    }

Adding path from cog shape to a Canvas

Adding path from cog shape to a Canvas

Add circles to center of cog shape

Let's add a little detail to the cog shape by adding circles paths to the shape. Concentric circles paths are added to the cogShape path.

 1struct CogShape2: Shape {
 2    var points: Int
 3    var rotationAngle: Angle
 4    
 5    func path(in rect: CGRect) -> Path {
 6        let center = CGPoint(x: rect.width/2.0 + rect.origin.x , y: rect.height/2.0 + rect.origin.y)
 7        let outerRadius = Double(min(rect.width,rect.height)) * 0.4
 8        let innerRadius = outerRadius * 1.0
 9        let offsetAngle = Double.pi * (-0.5)  + rotationAngle.radians
10        let cornerRadius = (rect.width / Double(points)) * 0.66
11        
12        var starSegments:[Segment] = []
13        for i in 0..<(points){
14            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
15            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
16            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
17            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
18            
19            let segment = Segment(
20                outerCenter: CGPoint(x: outerPoint.x + center.x,
21                                     y: outerPoint.y + center.y),
22                outerAngle: angle1,
23                outerRadius: cornerRadius,
24                innerCenter: CGPoint(x: innerPoint.x + center.x,
25                                     y: innerPoint.y + center.y),
26                innerAngle: angle2)
27            starSegments.append(segment)
28        }
29        
30        let path = Path() { path in
31            for (n, seg) in starSegments.enumerated() {
32                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
33                path.addArc(center: seg.outerCenter,
34                            radius: seg.outerRadius,
35                            startAngle: Angle(radians: seg.outerStartAngle),
36                            endAngle: Angle(radians: seg.outerEndAngle),
37                            clockwise: false)
38                path.addLine(to: seg.line2)
39                path.addArc(center: seg.innerCenter,
40                            radius: seg.outerRadius,
41                            startAngle: Angle(radians: seg.innerStartAngle),
42                            endAngle: Angle(radians: seg.innerEndAngle),
43                            clockwise: true)
44            }
45            path.closeSubpath()
46            
47            for i in [0.78, 0.5, 0.1] {
48                path.addPath(Circle().path(in: CGRect(x: center.x - (outerRadius * i),
49                                                      y: center.y - (outerRadius * i),
50                                                      width: outerRadius * i * 2,
51                                                      height: outerRadius * i * 2)))
52            }
53        }
54        return path
55    }
56}

The fillstyle of the contextGraphic is set to use the Even–odd rule property so that alternate paths are filled in.

 1    TimelineView(.animation) { timeline in
 2        VStack {
 3            let now = timeline.date.timeIntervalSinceReferenceDate
 4            let angle = Angle.degrees(now.remainder(dividingBy: 8)*45)
 5            
 6            Spacer().frame(height:30)
 7            
 8            Canvas { context, size in
 9                context.fill(
10                    CogShape2(points: 15, rotationAngle: angle)
11                        .path(in: CGRect(origin: .zero,
12                                         size: CGSize(
13                                            width: size.width,
14                                            height: size.height))),
15                    with: .color(.blue), style: FillStyle(eoFill: true, antialiased: true))
16            }
17            .frame(width: 300, height: 400)
18            
19            Spacer()
20        }
21    }

Adding circles to the cog shape to a Canvas

Adding circles to the cog shape to a Canvas

Animated cog shape with inner circles on a canvas

Animated cog shape with inner circles on a canvas

Add inner star shape to cog shape

The problem with the inner circles is that it is not obvious that these circles are rotating when the cog rotates. So there can be a visual disconnect between the circles staying still and the outer cog rim rotating. An alternative detail is to add an inner star-style shape to the center of the cog.

 1struct CogShape3: Shape {
 2    var points = 10
 3    var rotationAngle: Angle
 4
 5    func path(in rect: CGRect) -> Path {
 6        let center = CGPoint(x: rect.width/2.0 + rect.origin.x , y: rect.height/2.0 + rect.origin.y)
 7        let length = Double(min(rect.width, rect.height))
 8        let outerRadius = length * 0.4
 9        let innerRadius = outerRadius * 0.95
10        let offsetAngle = Double.pi * (-0.5) + rotationAngle.radians
11        let cornerRadius = (length / Double(points)) * 0.6
12        
13        var outerSegments:[Segment] = []
14        for i in 0..<(points){
15            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
16            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
17            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
18            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
19            
20            let segment = Segment(
21                outerCenter: CGPoint(x: outerPoint.x + center.x,
22                                     y: outerPoint.y + center.y),
23                outerAngle: angle1,
24                outerRadius: cornerRadius,
25                innerCenter: CGPoint(x: innerPoint.x + center.x,
26                                     y: innerPoint.y + center.y),
27                innerAngle: angle2)
28            outerSegments.append(segment)
29        }
30        
31        let innerPoints = points / 3
32        var innerSegments:[Segment] = []
33        for i in 0..<(innerPoints){
34            let angle1 = (2.0 * Double.pi/Double(innerPoints)) * Double(i)  + offsetAngle
35            let outerPoint = Cartesian(length: outerRadius * 0.7, angle: angle1)
36            let angle2 = (2.0 * Double.pi/Double(innerPoints)) * (Double(i) + 0.5)  + offsetAngle
37            let innerPoint = Cartesian(length: (innerRadius * 0.2), angle: (angle2))
38            
39            let segment = Segment(
40                outerCenter: CGPoint(x: outerPoint.x + center.x,
41                                     y: outerPoint.y + center.y),
42                outerAngle: angle1,
43                outerRadius: cornerRadius * 0.6,
44                innerCenter: CGPoint(x: innerPoint.x + center.x,
45                                     y: innerPoint.y + center.y),
46                innerAngle: angle2)
47            innerSegments.append(segment)
48        }
49        
50        let path = Path() { path in
51            for (n, seg) in outerSegments.enumerated() {
52                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
53                path.addArc(center: seg.outerCenter,
54                            radius: seg.outerRadius,
55                            startAngle: Angle(radians: seg.outerStartAngle),
56                            endAngle: Angle(radians: seg.outerEndAngle),
57                            clockwise: false)
58                path.addLine(to: seg.line2)
59                path.addArc(center: seg.innerCenter,
60                            radius: seg.outerRadius,
61                            startAngle: Angle(radians: seg.innerStartAngle),
62                            endAngle: Angle(radians: seg.innerEndAngle),
63                            clockwise: true)
64            }
65            path.closeSubpath()
66            
67            for (n, seg) in innerSegments.enumerated() {
68                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
69                path.addArc(center: seg.outerCenter,
70                            radius: seg.outerRadius,
71                            startAngle: Angle(radians: seg.outerStartAngle),
72                            endAngle: Angle(radians: seg.outerEndAngle),
73                            clockwise: false)
74                path.addLine(to: seg.line2)
75                path.addArc(center: seg.innerCenter,
76                            radius: seg.outerRadius,
77                            startAngle: Angle(radians: seg.innerStartAngle),
78                            endAngle: Angle(radians: seg.innerEndAngle),
79                            clockwise: true)
80            }
81            path.closeSubpath()
82        }
83        return path
84    }
85}

 1    TimelineView(.animation) { timeline in
 2        VStack {
 3            let now = timeline.date.timeIntervalSinceReferenceDate
 4            let angle = Angle.degrees(now.remainder(dividingBy: 8)*45)
 5            
 6            Spacer().frame(height:30)
 7            
 8            Canvas { context, size in
 9                context.fill(
10                    CogShape3(points: 30, rotationAngle: angle)
11                        .path(in: CGRect(origin: .zero,
12                                         size: CGSize(
13                                            width: size.width,
14                                            height: size.height))),
15                    with: .color(.blue), style: FillStyle(eoFill: true, antialiased: true))
16            }
17            .frame(width: 300, height: 400)
18            
19            Spacer()
20        }
21    }

Adding star-style shape to the cog shape to a Canvas

Adding star-style shape to the cog shape to a Canvas

Animated cog shape with inner star on a canvas

Animated cog shape with inner star on a canvas

Add inner star-style shape and circles to cog shape

What about both the inner star-shape path and concentric circle paths? The number of points on the star as well as the number and thickness of the circles can be modified to create some interesting patterns.

 1struct CogShape4: Shape {
 2    var points = 10
 3    var rotationAngle: Angle
 4
 5    func path(in rect: CGRect) -> Path {
 6        let center = CGPoint(x: rect.width/2.0 + rect.origin.x , y: rect.height/2.0 + rect.origin.y)
 7        let length = Double(min(rect.width, rect.height))
 8        let outerRadius = length * 0.4
 9        let innerRadius = outerRadius * 0.95
10        let offsetAngle = Double.pi * (-0.5) + rotationAngle.radians
11        let cornerRadius = (length / Double(points)) * 0.6
12        
13        var outerSegments:[Segment] = []
14        for i in 0..<(points){
15            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
16            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
17            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
18            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
19            
20            let segment = Segment(
21                outerCenter: CGPoint(x: outerPoint.x + center.x,
22                                     y: outerPoint.y + center.y),
23                outerAngle: angle1,
24                outerRadius: cornerRadius,
25                innerCenter: CGPoint(x: innerPoint.x + center.x,
26                                     y: innerPoint.y + center.y),
27                innerAngle: angle2)
28            outerSegments.append(segment)
29        }
30        
31        let innerPoints = points / 3
32        var innerSegments:[Segment] = []
33        for i in 0..<(innerPoints){
34            let angle1 = (2.0 * Double.pi/Double(innerPoints)) * Double(i)  + offsetAngle
35            let outerPoint = Cartesian(length: outerRadius * 0.8, angle: angle1)
36            let angle2 = (2.0 * Double.pi/Double(innerPoints)) * (Double(i) + 0.5)  + offsetAngle
37            let innerPoint = Cartesian(length: (innerRadius * 0.2), angle: (angle2))
38            
39            let segment = Segment(
40                outerCenter: CGPoint(x: outerPoint.x + center.x,
41                                     y: outerPoint.y + center.y),
42                outerAngle: angle1,
43                outerRadius: cornerRadius * 0.6,
44                innerCenter: CGPoint(x: innerPoint.x + center.x,
45                                     y: innerPoint.y + center.y),
46                innerAngle: angle2)
47            innerSegments.append(segment)
48        }
49        
50        let path = Path() { path in
51            for (n, seg) in outerSegments.enumerated() {
52                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
53                path.addArc(center: seg.outerCenter,
54                            radius: seg.outerRadius,
55                            startAngle: Angle(radians: seg.outerStartAngle),
56                            endAngle: Angle(radians: seg.outerEndAngle),
57                            clockwise: false)
58                path.addLine(to: seg.line2)
59                path.addArc(center: seg.innerCenter,
60                            radius: seg.outerRadius,
61                            startAngle: Angle(radians: seg.innerStartAngle),
62                            endAngle: Angle(radians: seg.innerEndAngle),
63                            clockwise: true)
64            }
65            path.closeSubpath()
66            
67            for (n, seg) in innerSegments.enumerated() {
68                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
69                path.addArc(center: seg.outerCenter,
70                            radius: seg.outerRadius,
71                            startAngle: Angle(radians: seg.outerStartAngle),
72                            endAngle: Angle(radians: seg.outerEndAngle),
73                            clockwise: false)
74                path.addLine(to: seg.line2)
75                path.addArc(center: seg.innerCenter,
76                            radius: seg.outerRadius,
77                            startAngle: Angle(radians: seg.innerStartAngle),
78                            endAngle: Angle(radians: seg.innerEndAngle),
79                            clockwise: true)
80            }
81            path.closeSubpath()
82
83            for i in [0.82, 0.7, 0.6, 0.1, 0.15] {
84                path.addPath(Circle().path(in: CGRect(x: center.x - (outerRadius * i),
85                                                      y: center.y - (outerRadius * i),
86                                                      width: outerRadius * i * 2,
87                                                      height: outerRadius * i * 2)))
88            }
89        }
90        return path
91    }
92}

Adding star-style shape and circles to the cog shape

Adding star-style shape and circles to the cog shape

Animated cog shape with inner star and circles

Animated cog shape with inner star and circles

Add multiple paths to canvas

Having settled on a cog shape with star and circles, the canvas is modified to contain two cogs inter-linking. The angles to animate the rotation are calculated so that one cog rotates twice as fast as the other. The size of the larger cog is set to twice that of the smaller cog and the rotation is twice as slow. There is also a shadow added to the cogs to create a bit of depth.

 1    TimelineView(.animation) { timeline in
 2        VStack {
 3            let now = timeline.date.timeIntervalSinceReferenceDate
 4            let angle1 = Angle.degrees(now.remainder(dividingBy: 8)*45)
 5            let angle2 = Angle.degrees(now.remainder(dividingBy: 4)*90)
 6            
 7            Spacer().frame(height:30)
 8            
 9            Canvas { context, size in
10                var innerContext = context
11                innerContext.addFilter(.shadow(color: .black, radius: 3, x: 3, y: 3, blendMode: .screen))
12
13                context.fill(
14                    CogShape4(points: 30, rotationAngle: angle1)
15                        .path(in: CGRect(x: 4,
16                                         y: 18,
17                                         width: 240,
18                                         height: 240)),
19                    with: .color(.red), style: FillStyle(eoFill: true, antialiased: true))
20                innerContext.stroke(
21                    CogShape4(points: 30, rotationAngle: angle1)
22                        .path(in: CGRect(x: 4,
23                                         y: 18,
24                                         width: 240,
25                                         height: 240)),
26                    with: .color(.red), lineWidth: 1)
27
28                context.fill(
29                    CogShape4(points: 15, rotationAngle: -angle2)
30                        .path(in: CGRect(x: 190,
31                                         y: 150,
32                                         width: 120,
33                                         height: 120)),
34                    with: .color(.blue), style: FillStyle(eoFill: true, antialiased: true))
35                innerContext.stroke(
36                    CogShape4(points: 15, rotationAngle: -angle2)
37                        .path(in: CGRect(x: 190,
38                                         y: 150,
39                                         width: 120,
40                                         height: 120)),
41                    with: .color(.blue), lineWidth: 1)
42            }
43            .frame(width: 330, height: 400)
44            
45            Spacer()
46        }
47    }

Animated interlocking cog shapes on a canvas

Animated interlocking cog shapes on a canvas

Multiple cog shapes spinning on a canvas

Multiple cog shapes spinning on a canvas

Conclusion

The Segments used to create a star shape with round corners in Star with rounded corners in SwiftUI is a suitable starting point for creating a cog shape. The inner and outer radius for the cog points are almost the same and the cog is created with an alternate arc paths. The TimelineView is used to animate the rotation of the cogs by redrawing the shapes on a canvas in a performant manner. Be warned that adding extra paths such as the star-shapes and concentric circles is a bit of a rabbit hole, where one can get lost creating multiple interesting patterns! I feel more work could be done on multiple inter-locking cogs spinning - to improve the cogs to lock just right, but I'll leave it for now.

Animate a background with TimelineView in SwiftUI

Eric Callanan — Sunday, 30 Jan 2022

TimelineView was introduced in iOS 15 to control how to change a view over time. This can be used to animate the background on a Canvas in a SwiftUI.

Create the blob shape

First create a blob shape by adopting the random shape code in Using canvas in SwiftUI. The shape is composed of 4 points joined by Cubic Bezier curves. The blobPath is passed in the containing rectangle and the points as well as the curve control points are set relative to the size and width of the rectangle.

 1struct ContentView: View {
 2    body: some View {
 3        VStack {
 4            Canvas { context, size in
 5                context.fill(
 6                    blobPath(in: CGRect(origin: .zero, size: size)),
 7                    with: .color(.purple))
 8            }
 9            .frame(width: 300, height: 300)
10            
11            Spacer()
12        }
13    }
14    
15    func blobPath(in rect : CGRect) -> Path {
16        let w = rect.width
17        let h = rect.height
18        let path = Path() { path in
19            path.move(to: CGPoint(x: w*0.53, y: h*0.87))
20            path.addCurve(to: CGPoint(x: w*0.15, y: h*0.49) ,
21                          control1: CGPoint(x: w*0.06, y: h*0.72),
22                          control2: CGPoint(x: w*0.26, y: h*0.75))
23            path.addCurve(to: CGPoint(x: w*0.48, y: h*0.08) ,
24                          control1: CGPoint(x: w*0.1, y: h*0.40),
25                          control2: CGPoint(x: w*0.17, y: -(h*0.02)))
26            path.addCurve(to: CGPoint(x: w*0.62, y: h*0.48) ,
27                          control1: CGPoint(x: w*0.75, y: h*0.18),
28                          control2: CGPoint(x: w*0.55, y: h*0.37))
29            path.addCurve(to: CGPoint(x: w*0.53, y: h*0.87) ,
30                          control1: CGPoint(x: w*0.87, y: h*0.64),
31                          control2: CGPoint(x: w*0.66, y: h*0.89))
32        }
33        return path
34    }

Blob shape on a Canvas

Blob shape on a Canvas

TimeLineView to animate the shape change

The view is wrapped in a TimelineView with an animation schedule similar to those used in TimelineView to move a shape on a canvas. Angles are calculated that will oscillate between different values and two distinct values are passed to the blobPath function. These offset values are used to modify two points in the path for the shape. The values to set and which points or control points to adjust are determined by trial and error. The duration of the animation is set to 4 seconds by using the remainder(dividingBy:) method on the number of seconds with a dividingBy parameter of 4.

 1struct ContentView: View {
 2    var body: some View {
 3        TimelineView(.animation) { timeline in
 4            VStack {
 5                let now = timeline.date.timeIntervalSinceReferenceDate
 6                let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 7                let d = (cos(angle.radians)) * 40
 8                let d2 = (cos(angle.radians)) * 10
 9
10                Canvas { context, size in
11                    context.fill(
12                        blobPath(in: CGRect(origin: .zero, size: size),
13                                 offset1: d,
14                                 offset2: d2),
15                        with: .color(.purple))
16                }
17                .frame(width: 450, height: 400)
18                
19                Spacer()
20            }
21        }
22    }
23    
24    func blobPath(in rect : CGRect, offset1 d1:Double, offset2 d2:Double) -> Path {
25        let w = rect.width
26        let h = rect.height
27        let path = Path() { path in
28            path.move(to: CGPoint(x: w*0.53, y: h*0.87))
29            path.addCurve(to: CGPoint(x: w*0.15, y: h*0.49) ,
30                            control1: CGPoint(x: w*0.06, y: h*0.72),
31                            control2: CGPoint(x: w*0.26, y: h*0.75))
32            path.addCurve(to: CGPoint(x: w*0.48, y: h*0.08) ,
33                            control1: CGPoint(x: w*0.1, y: h*0.40),
34                            control2: CGPoint(x: w*0.17, y: -(h*0.02)))
35            path.addCurve(to: CGPoint(x: w*0.62 - d2, y: h*0.48) ,
36                            control1: CGPoint(x: w*0.75, y: h*0.18),
37                            control2: CGPoint(x: w*0.55 + d1, y: h*0.37))
38            path.addCurve(to: CGPoint(x: w*0.53, y: h*0.87) ,
39                            control1: CGPoint(x: w*0.87 - d2, y: h*0.64),
40                            control2: CGPoint(x: w*0.66, y: h*0.89))
41        }
42        return path
43    }
44
45}

TimelineView to animate a blob shape on a Canvas

TimelineView to animate a blob shape on a Canvas

TimelineView to animate a blob shape change on a Canvas

TimelineView to animate a blob shape change on a Canvas

Add color gradient

The color of the shape is changed to a color gradient and there is more animation by adjusting some of the points on the left of the shape.

 1struct ContentView: View {
 2    var body: some View {
 3        TimelineView(.animation) { timeline in
 4            VStack {
 5                let now = timeline.date.timeIntervalSinceReferenceDate
 6                let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 7                let d = (cos(angle.radians)) * 40
 8                let d2 = (cos(angle.radians)) * 10
 9                
10                Canvas { context, size in
11                    context.fill(
12                        blobPath(in: CGRect(origin: .zero, size: size),
13                                 offset1: d,
14                                 offset2: d2),
15                        with: .linearGradient(Gradient(colors: [.yellow, .purple, .purple]),
16                                              startPoint: .zero ,
17                                              endPoint: CGPoint(x: size.width, y: size.height)))
18                }
19                .frame(width: 450, height: 400)
20                
21                Spacer()
22            }
23        }
24    }
25    
26    func blobPath(in rect : CGRect, offset1 d1:Double, offset2 d2:Double) -> Path {
27        let w = rect.width
28        let h = rect.height
29        let path = Path() { path in
30            path.move(to: CGPoint(x: w*0.53, y: h*0.87))
31            path.addCurve(to: CGPoint(x: w*0.15 + d2, y: h*0.49 - d2 ) ,
32                          control1: CGPoint(x: w*0.06, y: h*0.72),
33                          control2: CGPoint(x: w*0.26, y: h*0.75))
34            path.addCurve(to: CGPoint(x: w*0.48, y: h*0.08) ,
35                          control1: CGPoint(x: w*0.1 + d2, y: h*0.40),
36                          control2: CGPoint(x: w*0.17, y: -(h*0.02)))
37            path.addCurve(to: CGPoint(x: w*0.62 - d2, y: h*0.48) ,
38                          control1: CGPoint(x: w*0.75, y: h*0.18),
39                          control2: CGPoint(x: w*0.55 + d1, y: h*0.37))
40            path.addCurve(to: CGPoint(x: w*0.53, y: h*0.87) ,
41                          control1: CGPoint(x: w*0.87 - d2, y: h*0.64),
42                          control2: CGPoint(x: w*0.66, y: h*0.89))
43        }
44        return path
45    }
46}

Use a color gradient on the blob shape on a Canvas

Use a color gradient on the blob shape on a Canvas

Animate a blob shape with color gradient on a Canvas

Animate a blob shape with color gradient on a Canvas

Use the animated shape behind other content

There are a number of ways to place the animated shape on a canvas behind the App content. One way is to use a ZStack and place the content after the Canvas. The colors in the gradient were changed to be more transparent so the blob seems more in the background.

 1struct ContentView: View {
 2    var body: some View {
 3        TimelineView(.animation) { timeline in
 4            ZStack {
 5                VStack {
 6                    let now = timeline.date.timeIntervalSinceReferenceDate
 7                    let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 8                    let d = (cos(angle.radians)) * 40
 9                    let d2 = (cos(angle.radians)) * 10
10                    
11                    Canvas { context, size in
12                        context.fill(
13                            blobPath(in: CGRect(origin: .zero, size: size),
14                                     offset1: d,
15                                     offset2: d2),
16                            with: .linearGradient(Gradient(colors: [.yellow.opacity(0.5),
17                                                                    .purple.opacity(0.4),
18                                                                    .purple.opacity(0.5)]),
19                                                  startPoint: .zero ,
20                                                  endPoint: CGPoint(x: size.width, y: size.height)))
21                    }
22                    .frame(width: 450, height: 400)
23                    .scaleEffect(1.5)
24                    .offset(x: 50, y: 50)
25                    
26                    Spacer()
27                }
28                
29                VStack {
30                    Spacer().frame(height:50)
31                    Text("Data in the foreground")
32                        .font(.system(.title, design:.rounded))
33                        .fontWeight(.black)
34                    Image(systemName: "character.book.closed.fill")
35                        .font(.system(size: 120))
36                        .rotation3DEffect(
37                            .degrees(20),
38                            axis: (x: 1.0, y: 0.0, z: -0.5)
39                        )
40                    Spacer()
41                }
42            }
43        }
44    }
45    
46    func blobPath(in rect : CGRect, offset1 d1:Double, offset2 d2:Double) -> Path {
47        let w = rect.width
48        let h = rect.height
49        let path = Path() { path in
50            path.move(to: CGPoint(x: w*0.53, y: h*0.87))
51            path.addCurve(to: CGPoint(x: w*0.15 + d2, y: h*0.49 - d2 ) ,
52                          control1: CGPoint(x: w*0.06, y: h*0.72),
53                          control2: CGPoint(x: w*0.26, y: h*0.75))
54            path.addCurve(to: CGPoint(x: w*0.48, y: h*0.08) ,
55                          control1: CGPoint(x: w*0.1 + d2, y: h*0.40),
56                          control2: CGPoint(x: w*0.17, y: -(h*0.02)))
57            path.addCurve(to: CGPoint(x: w*0.62 - d2, y: h*0.48) ,
58                          control1: CGPoint(x: w*0.75, y: h*0.18),
59                          control2: CGPoint(x: w*0.55 + d1, y: h*0.37))
60            path.addCurve(to: CGPoint(x: w*0.53, y: h*0.87) ,
61                          control1: CGPoint(x: w*0.87 - d2, y: h*0.64),
62                          control2: CGPoint(x: w*0.66, y: h*0.89))
63        }
64        return path
65    }
66}

TimelineView to animate a blob shape in the background on a Canvas

TimelineView to animate a blob shape in the background on a Canvas

Animate a blob shape on a Canvas as a background

Animate a blob shape on a Canvas as a background

Conclusion

This article continues exploring animation of shapes using TimelineView on a canvas. Some of the points of blob shape are changed over time to animate the shape. This can be used to make view appear more active and it can be confined to sections of views by setting the size and location of the canvas.

TimelineView to rotate shapes on a canvas

Eric Callanan — Sunday, 23 Jan 2022

TimelineView, introduced in iOS 15, can be used to change objects on a canvas over time. The article takes the star shape defined previously and animates rotating the star shape on the canvas in a SwiftUI view.

Animate star rotation

Using the Star shape path defined in Using canvas in SwiftUI to construct a star with rounded corners. The Star is composed of an array of Segments, one for each point in the star. As in TimelineView to move a shape on a canvas, an extra parameter is added to the StarPath to specify the angle by which to rotate the star. TimelineView is used to wrap the canvas view with an animation schedule to update the canvas as quickly as the UI can display the changes.

 1    func starPath(in rect: CGRect, points: Int, angle: Double) -> Path {
 2        let center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 3        // radius of a circle that will fit in the rect with some padding
 4        let outerRadius = (Double(min(rect.width,rect.height)) / 2.0) * 0.95
 5        let innerRadius = outerRadius * 0.4
 6        let offsetAngle = angle        
 7        let cornerRadius = (rect.width / Double(points)) * 0.07
 8        
 9        var starSegments:[Segment] = []
10        for i in 0..<(points){
11            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
12            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
13            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
14            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
15            
16            let segment = Segment(
17                outerCenter: CGPoint(x: outerPoint.x + center.x,
18                                     y: outerPoint.y + center.y),
19                outerAngle: angle1,
20                outerRadius: cornerRadius,
21                innerCenter: CGPoint(x: innerPoint.x + center.x,
22                                     y: innerPoint.y + center.y),
23                innerAngle: angle2)
24            starSegments.append(segment)
25        }
26        
27        let path = Path() { path in
28            for (n, seg) in starSegments.enumerated() {
29                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
30                path.addArc(center: seg.outerCenter,
31                            radius: seg.outerRadius,
32                            startAngle: Angle(radians: seg.outerStartAngle),
33                            endAngle: Angle(radians: seg.outerEndAngle),
34                            clockwise: false)
35                path.addLine(to: seg.line2)
36                path.addArc(center: seg.innerCenter,
37                            radius: seg.outerRadius,
38                            startAngle: Angle(radians: seg.innerStartAngle),
39                            endAngle: Angle(radians: seg.innerEndAngle),
40                            clockwise: true)
41            }
42            path.closeSubpath()
43        }
44        return path
45    }

1func Cartesian(length:Double, angle:Double) -> CGPoint {
2    return CGPoint(x: length * cos(angle), y: length * sin(angle))
3}

 1struct Segment {
 2    let outerCenter: CGPoint
 3    let outerAngle: Double
 4    let outerRadius: Double
 5    let innerCenter: CGPoint
 6    let innerAngle: Double
 7    
 8    var line: CGPoint {
 9        get {
10            let pt = Cartesian(length: outerRadius, angle: outerStartAngle)
11            return CGPoint(x: pt.x + outerCenter.x, y: pt.y + outerCenter.y)
12        }
13    }
14    
15    var line2: CGPoint {
16        get {
17            let pt = Cartesian(length: outerRadius, angle: innerStartAngle)
18            return CGPoint(x: pt.x + innerCenter.x, y: pt.y + innerCenter.y)
19        }
20    }
21    
22    var outerStartAngle: Double {
23        get { self.outerAngle - (Double.pi * (0.45)) }
24    }
25    var outerEndAngle: Double {
26        get { self.outerAngle + (Double.pi * (0.45)) }
27    }
28    
29    var innerStartAngle: Double {
30        get { self.innerAngle - (Double.pi * (0.7)) }
31    }
32    var innerEndAngle: Double {
33        get { self.innerAngle + (Double.pi * (0.7)) }
34    }
35}

The remainder(dividingBy:) method is used with a remainder of 4 to repeat the animation every 4 seconds. Multiplying this value by 90 will result in values from -180 to +180, which is used to construct an Angle that is passed into the starPath.

 1        TimelineView(.animation) { timeline in
 2            VStack {
 3                let now = timeline.date.timeIntervalSinceReferenceDate
 4                let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 5                
 6                Canvas { context, size in
 7                    context.fill(
 8                        starPath(in: CGRect(origin: .zero,
 9                                            size: CGSize(width: size.width, height: size.height)),
10                                 points: 5,
11                                 angle: angle.radians),
12                        with: .color(.orange))
13                }
14                .frame(width: 300, height: 400)
15                .border(Color.blue)
16                
17                Spacer()
18            }
19        }

TimelineView to animate star rotation on Canvas

TimelineView to animate star rotation on Canvas

TimelineView to animate star rotation on Canvas

TimelineView to animate star rotation on Canvas

Reverse direction of rotation

Reversing the direction of rotation is achieved by simply passing in a negative value for the angle to the statPath function.

 1        TimelineView(.animation) { timeline in
 2            VStack {
 3                let now = timeline.date.timeIntervalSinceReferenceDate
 4                let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 5                
 6                Canvas { context, size in
 7                    context.fill(
 8                        starPath(in: CGRect(origin: .zero,
 9                                            size: CGSize(width: size.width, height: size.height)),
10                                 points: 9,
11                                 angle: -angle.radians),
12                        with: .color(.purple))
13                }
14                .frame(width: 300, height: 400)
15                
16                Spacer()
17            }
18        }

TimelineView to animate star rotation in reverse on Canvas

TimelineView to animate star rotation in reverse on Canvas

Rotate in z-axis

The rotation is achieved by passing an angle to the starPath function to offset each point in the star. As the time interval advances, a new angle is calculated and the star is created and drawn in a new position. The canvas can also be rotated using the SwiftUI view modifier rotation3DEffect, which allows the rotation of a view in a combination of the 3D axes. The following shows the effect of rotating the card in the y-axis resulting in a rotation of the card along the vertical axis. The same angle can be passed into the starPath function as well as the rotation3DEffect view modifier to combine rotating the star in 2 axes at the same time.

 1        TimelineView(.animation) { timeline in
 2            VStack {
 3                let now = timeline.date.timeIntervalSinceReferenceDate
 4                let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 5                
 6                Canvas { context, size in
 7                    context.fill(
 8                        starPath(in: CGRect(origin: .zero,
 9                                            size: CGSize(width: size.width, height: size.height)),
10                                 points: 5,
11                                 angle: -Double.pi*0.5),
12                        with: .color(.orange))
13                }
14                .rotation3DEffect(angle, axis: (0,1,0))
15                .frame(width: 300, height: 200)
16                .border(Color.blue)
17                
18                Spacer().frame(height:30)
19                
20                Canvas { context, size in
21                    context.fill(
22                        starPath(in: CGRect(origin: .zero,
23                                            size: CGSize(width: size.width, height: size.height)),
24                                 points: 5,
25                                 angle: angle.radians),
26                        with: .color(.green))
27                }
28                .rotation3DEffect(angle, axis: (0,1,0))
29                .frame(width: 300, height: 200)
30                .border(Color.blue)
31                
32                Spacer()
33            }
34        }

TimelineView to animate star rotation in z-axis on Canvas

TimelineView to animate star rotation in z-axis on Canvas

TimelineView to animate star rotation in z-axis on Canvas

TimelineView to animate star rotation in z-axis on Canvas

Rotate and Resize the Star shape

It is possible to rotate any view in multiple axes by the same angle. Using a parameter in the starPath on the canvas is used to change the shape while the rotation3DEffect view modifier is used to rotate the shape. The size of the star is changed by adjusting the outer radius of the points on the star with the angle passed into the starPath. The angle is also used to rotate the star in the y-axis.

 1    var body: some View {
 2        ZStack {
 3            TimelineView(.animation) { timeline in
 4                VStack {
 5                    let now = timeline.date.timeIntervalSinceReferenceDate
 6                    let angle = Angle.degrees(now.remainder(dividingBy: 4)*90)
 7
 8                    Spacer().frame(height:30)
 9                    
10                    Canvas { context, size in
11                        context.fill(
12                            starPath(in: CGRect(origin: .zero,
13                                                size: CGSize(width: size.width, height: size.height)),
14                                     points: 5,
15                                     angle: angle.radians),
16                            with: .color(.green))
17                    }
18                    .rotation3DEffect(angle, axis: (0,1,0))
19                    .frame(width: 300, height: 400)
20                    
21                    Spacer()
22                }
23            }
24        }
25    }
26    
27    func starPath(in rect: CGRect, points: Int, angle: Double) -> Path {
28        let center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
29        let outerRadius = Double(min(rect.width,rect.height)) * 0.5 * abs(angle/Double.pi)
30        let innerRadius = outerRadius * 0.4
31        let offsetAngle = Double.pi * (-0.5)
32        let cornerRadius = (rect.width / Double(points)) * 0.07
33        
34        var starSegments:[Segment] = []
35        for i in 0..<(points){
36            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
37            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
38            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
39            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
40            
41            let segment = Segment(
42                outerCenter: CGPoint(x: outerPoint.x + center.x,
43                                     y: outerPoint.y + center.y),
44                outerAngle: angle1,
45                outerRadius: cornerRadius,
46                innerCenter: CGPoint(x: innerPoint.x + center.x,
47                                     y: innerPoint.y + center.y),
48                innerAngle: angle2)
49            starSegments.append(segment)
50        }
51        
52        let path = Path() { path in
53            for (n, seg) in starSegments.enumerated() {
54                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
55                path.addArc(center: seg.outerCenter,
56                            radius: seg.outerRadius,
57                            startAngle: Angle(radians: seg.outerStartAngle),
58                            endAngle: Angle(radians: seg.outerEndAngle),
59                            clockwise: false)
60                path.addLine(to: seg.line2)
61                path.addArc(center: seg.innerCenter,
62                            radius: seg.outerRadius,
63                            startAngle: Angle(radians: seg.innerStartAngle),
64                            endAngle: Angle(radians: seg.innerEndAngle),
65                            clockwise: true)
66            }
67            path.closeSubpath()
68        }
69        return path
70    }

TimelineView to animate star rotation in z-axis while resizing

TimelineView to animate star rotation in z-axis while resizing

Conclusion

The TimelineView animation view was introduced in iOS 15 and is used to wrap a canvas view with an animation schedule. This updates the canvas as quickly as the UI can display changes. The time is used to calculate an angle to rotate a star shape resulting in the star rotating over time. The rotation can be combined with the shape resizing and rotating in 3D space to produce some interesting effects.

TimelineView to move a shape on a canvas

Eric Callanan — Sunday, 16 Jan 2022

TimelineView was introduced in iOS 15 to control how a view can change over time. This article takes the heart shape defined previously and animates by changing the path on the canvas in a SwiftUI view.

Wrap Canvas in TimelineView

Start with a canvas containing the heart shape from Using canvas in SwiftUI. A TimelineView is used to wrap the view containing the canvas with a schedule of AnimationTimelineSchedule. The animation schedule will update the canvas as quickly as the UI can display changes. The timeIntervalSinceReferenceDate is the number of seconds since January 01 2001 and it is used to get an ever increasing number. Using the remainder when divided by 5 will give a number between -2.5 and +2.5. It can be beneficial to display the value for x and the time interval value using a Text view when experimenting with the animation. This value is multiplied by 20 to get an x-value varying from -50 to +50, which is passed into the heartPath function.

 1    var body: some View {
 2        TimelineView(.animation) { timeline in
 3            VStack {
 4                let now = timeline.date.timeIntervalSinceReferenceDate
 5                let x = now.remainder(dividingBy: 5) * 20
 6                
 7                Text("now   = \(now)").frame(width:250)
 8                Text("x     = \(x)").frame(width:250)
 9                Spacer().frame(height:50)
10                
11                
12                Canvas { context, size in
13                    context.fill(
14                        heartPath(in: CGRect(origin: .zero,
15                                             size: CGSize(width: size.width, height: size.height)),
16                                  x: x),
17                        with: .color(.red))
18                }
19                .frame(width: 300, height: 200)
20                .border(Color.blue)
21                
22                Spacer()
23            }
24        }
25    }

The heartPath function is updated to offset the x-coordinates of the path by the x value passed in. This results in the heart shape sliding across the canvas in 5 seconds.

 1    func heartPath(in rect: CGRect, x: Double) -> Path {
 2        let size = min(rect.width, rect.height)
 3        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 4        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 5        
 6        func offsetPoint(p: CGPoint) -> CGPoint {
 7            return CGPoint(x: p.x + xOffset + x, y: p.y+yOffset)
 8        }
 9        let path = Path() { path in
10            path.move(to: offsetPoint(p: (CGPoint(x: (size * 0.50), y: (size * 0.25)))))
11            path.addCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.25))),
12                          control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))),
13                          control2: offsetPoint(p: CGPoint(x: 0, y: 0)))
14            path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: size)),
15                          control1: offsetPoint(p: CGPoint(x: 0, y: (size * 0.60))),
16                          control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))))
17            path.addCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.25))),
18                          control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))),
19                          control2: offsetPoint(p: CGPoint(x: size, y: (size * 0.60))))
20            path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.25))),
21                          control1: offsetPoint(p: CGPoint(x: size, y: 0)),
22                          control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))))
23        }
24        return path
25    }

Using TimelineView to animate heart shape moving in a canvas

Using TimelineView to animate heart shape moving in a canvas

Using TimelineView to animate heart shape moving on Canvas

TimelineView to animate heart shape moving on Canvas

Slide the shape on/off canvas

The remainder(dividingBy:) method returns a number between -1.5 and +1.5 when the number 3 is passed as the parameter. This will provide values in the range -300 to +300 when multiplied by 200. Adjusting all the x coordinates by -300 results in the heart shape off to the left of the canvas. As the time changes and the remainder values increase the heart slides in from the left and continues to slide off the canvas on the right. The dividedBy value also sets the duration of the animation as it is the time that is divided. In the first case the value 3 sets the animation to repeat every 3 seconds and the second one repeats every second.

 1            TimelineView(.animation) { timeline in
 2                VStack {
 3                    let now = timeline.date.timeIntervalSinceReferenceDate
 4                    let x = now.remainder(dividingBy: 3) * 200
 5                    
 6                    Text("now.remainder(dividingBy: 3) * 200").frame(width:300)
 7                    Canvas { context, size in
 8                        context.fill(
 9                            heartPath(in: CGRect(origin: .zero,
10                                                 size: CGSize(width: size.width, height: size.height)),
11                                      x: x),
12                            with: .color(.red))
13                    }
14                    .frame(width: 300, height: 200)
15                    .border(Color.blue)
16                    
17                    Spacer().frame(height:50)
18
19                    let x2 = now.remainder(dividingBy: 1) * 500
20                    Text("now.remainder(dividingBy: 1) * 500").frame(width:300)
21                    Canvas { context, size in
22                        context.fill(
23                            heartPath(in: CGRect(origin: .zero,
24                                                 size: CGSize(width: size.width, height: size.height)),
25                                      x: x2),
26                            with: .color(.red))
27                    }
28                    .frame(width: 300, height: 100)
29                    
30                    Spacer()
31                }
32            }

Using TimelineView to animate heart shape moving on and off Canvas

Using TimelineView to animate heart shape moving on and off Canvas

TimelineView to animate heart shape moving on and off Canvas

TimelineView to animate heart shape moving on and off Canvas

Slide the shape back and forth

How can the shape move back and forth rather than moving to the right, disappearing and reappearing on the left? The remainder value is adjusted to return values between -180 and +180, which are used to create angles by degrees representing a 360 degrees circle. The x coordinate of the angle is calculated using the cosine function and this gradually increases and then gradually decreases. Once again, increasing the size of x can result in the shape moving off the canvas.

 1            TimelineView(.animation) { timeline in
 2                VStack {
 3                    let now = timeline.date.timeIntervalSinceReferenceDate
 4                    let angle = Angle.degrees(now.remainder(dividingBy: 2)*180)
 5                    let x = (cos(angle.radians) * 50)
 6
 7                    Canvas { context, size in
 8                        context.fill(
 9                            heartPath(in: CGRect(origin: .zero,
10                                                 size: CGSize(width: size.width, height: size.height)),
11                                      x: x),
12                            with: .color(.red))
13                    }
14                    .frame(width: 300, height: 200)
15                    .border(Color.blue)
16                    
17                    Spacer().frame(height:50)
18
19                    let x2 = cos(angle.radians) * 300
20                    Canvas { context, size in
21                        context.fill(
22                            heartPath(in: CGRect(origin: .zero,
23                                                 size: CGSize(width: size.width, height: size.height)),
24                                      x: x2),
25                            with: .color(.red))
26                    }
27                    .frame(width: 300, height: 100)
28                    
29                    Spacer()
30                }
31            }

TimelineView to animate heart shape moving back and forth on Canvas

TimelineView to animate heart shape moving back and forth on Canvas

Animate heart shape moving back and forth on Canvas

Animate heart shape moving back and forth on Canvas

Adjust the shape

The shape can be animated by changing the path based on the values passed into the path function. In this case there are two parameters passed to the heartPath, one to move the shape on the x-axis and one to change the tip of the heart shape.

 1    func heartPath(in rect: CGRect, move: Double, tip: Double) -> Path {
 2        let size = min(rect.width, rect.height)
 3        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 4        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 5        
 6        func offsetPoint(p: CGPoint) -> CGPoint {
 7            return CGPoint(x: p.x + xOffset + move, y: p.y+yOffset)
 8        }
 9        let path = Path() { path in
10            path.move(to: offsetPoint(p: (CGPoint(x: (size * 0.50), y: (size * 0.25)))))
11            path.addCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.25))),
12                          control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))),
13                          control2: offsetPoint(p: CGPoint(x: 0, y: 0)))
14            path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50 + tip), y: size)),
15                          control1: offsetPoint(p: CGPoint(x: 0, y: (size * 0.60))),
16                          control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))))
17            path.addCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.25))),
18                          control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))),
19                          control2: offsetPoint(p: CGPoint(x: size, y: (size * 0.60))))
20            path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.25))),
21                          control1: offsetPoint(p: CGPoint(x: size, y: 0)),
22                          control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))))
23        }
24        return path
25    }

Just one of these parameters can be set to animate the shape changing or both parameters can be set to move the shape while change it.

 1            TimelineView(.animation) { timeline in
 2                VStack {
 3                    let now = timeline.date.timeIntervalSinceReferenceDate
 4                    let angle = Angle.degrees(now.remainder(dividingBy: 2)*180)
 5                    let x = (cos(angle.radians) * 50)
 6
 7                    Canvas { context, size in
 8                        context.fill(
 9                            heartPath(in: CGRect(origin: .zero,
10                                                 size: CGSize(width: size.width, height: size.height)),
11                                      move: 0,
12                                      tip: x),
13                            with: .color(.red))
14                    }
15                    .frame(width: 300, height: 200)
16                    .border(Color.blue)
17                    
18                    Spacer().frame(height:50)
19
20                    Canvas { context, size in
21                        context.fill(
22                            heartPath(in: CGRect(origin: .zero,
23                                                 size: CGSize(width: size.width, height: size.height)),
24                                      move: x,
25                                      tip: x),
26                            with: .color(.red))
27                    }
28                    .frame(width: 300, height: 200)
29
30                    Spacer()
31                }
32            }

TimelineView to animate heart shape moving and point in shape moving on Canvas

TimelineView to animate heart shape moving and point in shape moving on Canvas

Animate heart shape moving and point in shape moving on Canvas

Animate heart shape moving and point in shape moving on Canvas

Conclusion

Canvas does not offer interactivity to individual elements but it can provide better performance. The TimelineView which was introduced in iOS 15, is used to wrap the view with the canvas. The animation schedule is used with the TimelineView to update the canvas as quickly as the UI can display changes. The time is used to calculate an x-coordinate adjustment and passed to the path in the canvas, which redraws the shape with the new path as quickly as possible. The animations here are simply to move the shape and adjust one point in the shape. Multiple points in the shape as well as the control points can all be adjusted with redrawing of the path.

Using canvas in SwiftUI

Eric Callanan — Sunday, 09 Jan 2022

The canvas view provides a mechanism to draw in SwiftUI. The canvas takes GraphicsContext and size as parameters to allow immediate mode drawing within the containing frame. Here we draw system shapes as well as freeform shapes using path structure.

Draw Ellipse in a Canvas

This view contains three Canvas views in a VStack. The first Canvas uses the GraphicsContext to fill an Ellipse with the color blue. The ellipse is got by initializing the Path on the canvas with the ellipseIn CGRect parameter and specifying the canvas containing rectangle. This creates a path as an ellipse inscribed within the given rectangle.

The second canvas separates out the definition of the path to a separate function, but still fills in the color blue for the ellipse. The third canvas adds some padding by setting an offset for the path CGRect and reducing the width and height. Stroke is used on the GraphicsContext to outline the ellipse.

 1struct ContentView: View {
 2    var body: some View {
 3        VStack {
 4            Canvas { context, size in
 5                context.fill(
 6                    Path(ellipseIn: CGRect(origin: .zero, size: size)),
 7                    with: .color(.blue))
 8            }
 9            .frame(width: 300, height: 150)
10            .border(Color.red)
11            
12            Canvas { context, size in
13                context.fill(
14                    path(in: CGRect(x:0 , y:0, width: size.width, height: size.height)),
15                    with: .color(.blue))
16            }
17            .frame(width: 300, height: 150)
18            .border(Color.red)
19            
20            Canvas { context, size in
21                context.stroke(
22                    path(in: CGRect(x: size.width * 0.05,
23                                    y: size.height * 0.05,
24                                    width: size.width * 0.9,
25                                    height: size.height * 0.9)),
26                    with: .color(.blue), lineWidth: 5)
27            }
28            .frame(width: 300, height: 150)
29            .border(Color.red)
30
31            Spacer()
32        }
33    }
34    
35    func path(in rect: CGRect) -> Path {
36        let path = Path() { path in
37            path.addPath(Ellipse().path(in: rect))
38        }
39        return path
40    }
41}

Ellipse drawn in a canvas with separate path function

Ellipse drawn in a canvas with separate path function

Draw a heart

The path function can get more complicated that simply using the path of a predefined shape such as Rectangle or Ellipse. The separated heartPath function is defined to draw a heard shape within the enclosing rectangle. The logic is encapsulated in the heartPath function to center the heard shape in the enclosing rectangle.

 1struct ContentView: View {
 2    var body: some View {
 3        VStack {
 4            Canvas { context, size in
 5                context.fill(
 6                    heartPath(in: CGRect(origin: .zero, size: size)),
 7                    with: .color(.red))
 8            }
 9            .frame(width: 300, height: 200)
10            .border(Color.blue)
11            
12            Spacer()
13        }
14    }
15    
16    func heartPath(in rect: CGRect) -> Path {
17        let size = min(rect.width, rect.height)
18        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
19        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
20        
21        func offsetPoint(p: CGPoint) -> CGPoint {
22            return CGPoint(x: p.x + xOffset, y: p.y+yOffset)
23        }
24        let path = Path() { path in
25            path.move(to: offsetPoint(p: (CGPoint(x: (size * 0.50), y: (size * 0.25)))))
26            path.addCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.25))),
27                          control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))),
28                          control2: offsetPoint(p: CGPoint(x: 0, y: 0)))
29            path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: size)),
30                          control1: offsetPoint(p: CGPoint(x: 0, y: (size * 0.60))),
31                          control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))))
32            path.addCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.25))),
33                          control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))),
34                          control2: offsetPoint(p: CGPoint(x: size, y: (size * 0.60))))
35            path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.25))),
36                          control1: offsetPoint(p: CGPoint(x: size, y: 0)),
37                          control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))))
38        }
39        return path
40    }
41}

Path to draw a heart in a canvas

Path to draw a heart in a canvas

Star shape in a Canvas

This takes the path of the Star shape used in Star with rounded corners in SwiftUI. The struct for the Segment is the same and is used to create the required number of segments for the star. The function starPath takes a parameter to specify the number of points in the star.

1func Cartesian(length:Double, angle:Double) -> CGPoint {
2    return CGPoint(x: length * cos(angle), y: length * sin(angle))
3}

 1struct Segment {
 2    let outerCenter: CGPoint
 3    let outerAngle: Double
 4    let outerRadius: Double
 5    let innerCenter: CGPoint
 6    let innerAngle: Double
 7    
 8    var line: CGPoint {
 9        get {
10            let pt = Cartesian(length: outerRadius, angle: outerStartAngle)
11            return CGPoint(x: pt.x + outerCenter.x, y: pt.y + outerCenter.y)
12        }
13    }
14    
15    var line2: CGPoint {
16        get {
17            let pt = Cartesian(length: outerRadius, angle: innerStartAngle)
18            return CGPoint(x: pt.x + innerCenter.x, y: pt.y + innerCenter.y)
19        }
20    }
21    
22    var outerStartAngle: Double {
23        get { self.outerAngle - (Double.pi * (0.45)) }
24    }
25    var outerEndAngle: Double {
26        get { self.outerAngle + (Double.pi * (0.45)) }
27    }
28    
29    var innerStartAngle: Double {
30        get { self.innerAngle - (Double.pi * (0.7)) }
31    }
32    var innerEndAngle: Double {
33        get { self.innerAngle + (Double.pi * (0.7)) }
34    }
35}

 1struct ContentView: View {
 2    var body: some View {
 3        VStack {
 4            Canvas { context, size in
 5                context.fill(
 6                    starPath(in: CGRect(origin: .zero, size: size), points: 5),
 7                    with: .color(.green))
 8            }
 9            .frame(width: 300, height: 300)
10            
11            Spacer()
12                .frame(height: 80)
13            
14            HStack {
15                Canvas { context, size in
16                    context.fill(
17                        starPath(in: CGRect(origin: .zero, size: size), points: 7),
18                        with: .color(.yellow))
19                }
20                .frame(width: 150, height: 150)
21            
22                Canvas { context, size in
23                    context.fill(
24                        starPath(in: CGRect(origin: .zero, size: size), points: 7),
25                        with: .color(.yellow))
26                }
27                .frame(width: 100, height: 150)
28            
29                Canvas { context, size in
30                    context.fill(
31                        starPath(in: CGRect(origin: .zero, size: size), points: 7),
32                        with: .color(.yellow))
33                }
34                .frame(width: 50, height: 150)
35            }
36            
37            
38            Spacer()
39        }
40    }
41    
42    func starPath(in rect: CGRect, points: Int) -> Path {
43        // centre of the containing rect
44        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
45        // Adjust center down for odd number of sides less than 8
46        if points%2 == 1 && points < 8 {
47            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
48        }
49        
50        // radius of a circle that will fit in the rect with some padding
51        let outerRadius = (Double(min(rect.width,rect.height)) / 2.0) * 0.95
52        let innerRadius = outerRadius * 0.4
53        let offsetAngle = Double.pi * (-0.5)
54        
55        let cornerRadius = (rect.width / Double(points)) * 0.07
56        
57        var starSegments:[Segment] = []
58        for i in 0..<(points){
59            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
60            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
61            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
62            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
63            
64            let segment = Segment(
65                outerCenter: CGPoint(x: outerPoint.x + center.x,
66                                     y: outerPoint.y + center.y),
67                outerAngle: angle1,
68                outerRadius: cornerRadius,
69                innerCenter: CGPoint(x: innerPoint.x + center.x,
70                                     y: innerPoint.y + center.y),
71                innerAngle: angle2)
72            starSegments.append(segment)
73        }
74        
75        let path = Path() { path in
76            for (n, seg) in starSegments.enumerated() {
77                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
78                path.addArc(center: seg.outerCenter,
79                            radius: seg.outerRadius,
80                            startAngle: Angle(radians: seg.outerStartAngle),
81                            endAngle: Angle(radians: seg.outerEndAngle),
82                            clockwise: false)
83                path.addLine(to: seg.line2)
84                path.addArc(center: seg.innerCenter,
85                            radius: seg.outerRadius,
86                            startAngle: Angle(radians: seg.innerStartAngle),
87                            endAngle: Angle(radians: seg.innerEndAngle),
88                            clockwise: true)
89            }
90            path.closeSubpath()
91        }
92        return path
93    }
94}

Star shape in a canvas

Star shape in a canvas

Blob shape in Canvas

A random blob shape can also be created in a Canvas, using some of the code in How to animate a Shape change in SwiftUI. The CubicSegment structure is composed of a destination point and two control points. The CreateRandomShape function takes a parameter to specify the number of segments in the shape and creates an array of cubic segments within the enclosing rectangle. The blobPath function creates a path from the array of CubicSegment and returns this path.

 1struct CubicSegment {
 2    let point: CGPoint
 3    let control1: CGPoint
 4    let control2: CGPoint
 5}
 6
 7func CreateRandomShape(segments n: Int) -> [CubicSegment] {
 8    var segments:[CubicSegment] = []
 9    
10    let r = 0.5
11    let c = CGPoint(x: 0.5, y: 0.5)
12    let sectorAngle = 2.0 * Double.pi / Double(n)
13    var previousSectorIn = true
14    for i in 0..<n {
15        let segmentAngle = sectorAngle * Double.random(in: 0.7...1.3)
16        let angle = (sectorAngle * Double(i-0)) + segmentAngle
17        let radius = r * Double.random(in: 0.45...0.85)
18        let pt = Cartesian(length: radius, angle: angle)
19        
20        let ctlAngle1 = angle - (segmentAngle * 0.75)
21        let ctlDistance1 = previousSectorIn ? radius*1.45 : radius*0.55
22        let ctl1 = Cartesian(length: ctlDistance1, angle: ctlAngle1)
23        
24        let ctlAngle2 = angle - (segmentAngle * 0.25)
25        let ctlDistance2 = radius * Double.random(in: 0.55...1.45)
26        previousSectorIn = ctlDistance2 < radius
27        let ctl2 = Cartesian(length: ctlDistance2, angle: ctlAngle2)
28        
29        let s:CubicSegment = CubicSegment(
30            point: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
31            control1: CGPoint(x: ctl1.x + c.x, y: ctl1.y + c.y),
32            control2: CGPoint(x: ctl2.x + c.x, y: ctl2.y + c.y))
33        segments.append(s)
34    }
35    segments.append(segments[0])
36    return segments
37}

 1struct ContentView: View {
 2    let blob = CreateRandomShape(segments: 17)
 3    
 4    var body: some View {
 5        VStack {
 6            Canvas { context, size in
 7                context.fill(
 8                    blobPath(in: CGRect(origin: .zero, size: size), from: blob),
 9                    with: .color(.purple))
10            }
11            .frame(width: 300, height: 200)
12            
13            Spacer()
14        }
15    }
16    
17    func blobPath(in rect: CGRect, from segments: [CubicSegment]) -> Path {
18        func adjustPoint(p: CGPoint) -> CGPoint {
19            return CGPoint(x: p.x * rect.width, y: p.y * rect.height)
20        }
21        
22        let path = Path() { path in
23            path.move(to: adjustPoint(p: segments[0].point))
24            for i in 1..<segments.count {
25                path.addCurve(to: adjustPoint(p: segments[i].point),
26                              control1: adjustPoint(p: segments[i].control1),
27                              control2: adjustPoint(p: segments[i].control2))
28            }
29        }
30        return path
31    }
32}

Random blob shape in a canvas

Random blob shape in a canvas

Conclusion

It is relatively straight forward to take Paths from shape views and draw the items directly in a Canvas. The canvas does not offer interactivity to individual elements but it can provide better performance for a complex drawing that involves dynamic data.

Create a star rating SwiftUI component

Eric Callanan — Sunday, 02 Jan 2022

Create an interactive star rating SwiftUI component. This article will use the star cutout shape with rounded corners as well as elements of the custom slider to create a star rating component in SwiftUI.

Row of Star shapes

Here is the Star shape that was created in Create a Star cutout shape in SwiftUI and Star with rounded corners in SwiftUI.

 1struct StarShape: Shape {
 2    var points = 5
 3    var cornerRadius = 3.0
 4    var isCutout = false
 5    var isCircleOutline = false
 6    
 7    func path(in rect: CGRect) -> Path {
 8        // centre of the containing rect
 9        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
10        // Adjust center down for odd number of sides less than 8
11        if points%2 == 1 && points < 8 && !isCircleOutline {
12            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
13        }
14        
15        // radius of a circle that will fit in the rect with some padding
16        let outerRadius = (Double(min(rect.width,rect.height)) / 2.0) * 0.9
17        let innerRadius = outerRadius * 0.4
18        let offsetAngle = Double.pi * (-0.5)
19        
20        var starSegments:[Segment] = []
21        for i in 0..<(points){
22            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
23            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
24            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
25            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
26            
27            let segment = Segment(
28                outerCenter: CGPoint(x: outerPoint.x + center.x,
29                                     y: outerPoint.y + center.y),
30                outerAngle: angle1,
31                outerRadius: cornerRadius,
32                innerCenter: CGPoint(x: innerPoint.x + center.x,
33                                     y: innerPoint.y + center.y),
34                innerAngle: angle2)
35            starSegments.append(segment)
36        }
37        
38        let path = Path() { path in
39            if isCutout {
40                if isCircleOutline {
41                    path.addPath(Circle().path(in: rect))
42                    
43                } else {
44                    path.addPath(Rectangle().path(in: rect))
45                }
46            }
47            for (n, seg) in starSegments.enumerated() {
48                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
49                path.addArc(center: seg.outerCenter,
50                            radius: seg.outerRadius,
51                            startAngle: Angle(radians: seg.outerStartAngle),
52                            endAngle: Angle(radians: seg.outerEndAngle),
53                            clockwise: false)
54                path.addLine(to: seg.line2)
55                path.addArc(center: seg.innerCenter,
56                            radius: seg.outerRadius,
57                            startAngle: Angle(radians: seg.innerStartAngle),
58                            endAngle: Angle(radians: seg.innerEndAngle),
59                            clockwise: true)
60            }
61            path.closeSubpath()
62        }
63        return path
64    }
65}

These star shapes can be places in a HStack as cutout stars with a clear background.

1    HStack(spacing:0) {
2        ForEach(1...5, id:\.self) { _ in
3            StarShape(points: 5, cornerRadius: 1, isCutout: true)
4                .fill(Color.gray, style: FillStyle(eoFill: true, antialiased: true))
5                .frame(width: 50, height: 50, alignment: .center)
6        }
7    }

Five stars in a HStack with sharp corners and rounded corners

Five stars in a HStack with sharp corners and rounded corners

Set color for star rating

Embed the row of Star cutout shapes into a separate view StarRatingView. This view takes the value of the star rating as well as an optional value of the total number of starts. The default for the number of stars is five, but different numbers could be used, such as ten to display a component with a rating out of ten stars. A background is set in a ZStack behind the stars composed of two rectangles in a HStack. The color of the first Rectangle is set to yellow and its width is set to the proportion of the value of the star rating. The remaining space is filled by the second Rectangle with a transparent fill color. In this way, the stars are filled in proportional to the star rating.

 1struct StarRatingView: View {
 2    var value: Double
 3    var stars: Int = 5
 4    
 5    init(value: Double) {
 6        self.init(value: value, stars: 5)
 7    }
 8    
 9    init(value: Double, stars: Int) {
10        self.value = min(value, Double(stars))
11        self.stars = stars
12    }
13    
14    var body: some View {
15        GeometryReader { gr in
16            let ratingWidth = gr.size.width * value / Double(stars)
17            let starWidth = gr.size.width / Double(stars)
18            let radius = starWidth * 0.01
19            ZStack {
20                HStack(spacing:0) {
21                    Rectangle()
22                        .fill(.yellow)
23                        .frame(width: ratingWidth)
24                    Rectangle()
25                        .fill(.clear)
26                }
27                
28                HStack(spacing:0) {
29                    ForEach(1...stars, id:\.self) { _ in
30                        StarShape(points: 5, cornerRadius: radius, isCutout: true)
31                            .fill(Color.gray, style: FillStyle(eoFill: true, antialiased: true))
32                            .frame(width: starWidth, height: gr.size.height, alignment: .center)
33                    }
34                }
35            }
36        }
37    }
38}

Here are examples of using the star rating with different number of stars as well as laying them out in different sizes.

 1struct ContentView: View {
 2    @State private var currentValue = 4.0
 3    
 4    var body: some View {
 5        ZStack {
 6            Color(red: 214/255, green: 232/255, blue: 248/255)
 7                .edgesIgnoringSafeArea(.all)
 8            
 9            VStack(spacing:40) {
10                VStack(spacing:0) {
11                    let rating = 2.5
12                    Text("Star Rating = \(rating, specifier: "%.1F") out of 5")
13                    VStack {
14                        StarRatingView(value: rating, stars: 5)
15                            .frame(width: 250, height: 50, alignment: .center)
16                    }
17                }
18
19                VStack(spacing:0) {
20                    let rating = 6.3
21                    Text("Star Rating = \(rating, specifier: "%.1F") out of 10")
22                    VStack {
23                        StarRatingView(value: rating, stars: 10)
24                            .frame(width: 250, height: 30, alignment: .center)
25                    }
26                }
27
28                VStack(spacing:0) {
29                    let rating = 2.4
30                    Text("Star Rating = \(rating, specifier: "%.1F") out of 3")
31                    VStack {
32                        StarRatingView(value: rating, stars: 3)
33                            .frame(width: 250, height: 100, alignment: .center)
34                    }
35                }
36
37                Spacer()
38            }
39        }
40    }
41}

Set star rating with yellow background proportional to rating

Set star rating with yellow background proportional to rating

Make the star rating interactive

The Star Rating SwiftUI view can be made interactive with the use of a DragGesture, similar to the sliders in How to customise the Slider in SwiftUI. The DragGesture is added to the HStack of stars so that any drag along the stars will update the star rating.

 1struct StarRatingView: View {
 2    @Binding var value: Double
 3    var stars: Int = 5
 4    
 5    @State var lastCoordinateValue: CGFloat = 0.0
 6    
 7    var body: some View {
 8        GeometryReader { gr in
 9            let ratingWidth = gr.size.width * value / Double(stars)
10            let starWidth = gr.size.width / Double(stars)
11            let radius = starWidth * 0.01
12            
13            let maxValue = gr.size.width
14            let scaleFactor = maxValue / Double(stars)
15            let sliderVal = self.value * scaleFactor
16            
17            ZStack {
18                HStack(spacing:0) {
19                    Rectangle()
20                        .fill(.yellow)
21                        .frame(width: ratingWidth)
22                    Rectangle()
23                        .fill(.clear)
24                }
25                
26                HStack(spacing:0) {
27                    ForEach(1...stars, id:\.self) { _ in
28                        StarShape(points: 5, cornerRadius: radius, isCutout: true)
29                            .fill(Color.gray, style: FillStyle(eoFill: true, antialiased: true))
30                            .frame(width: starWidth, height: gr.size.height, alignment: .center)
31                    }
32                }
33                .gesture(
34                    DragGesture(minimumDistance: 0)
35                        .onChanged { v in
36                            if (abs(v.translation.width) < 0.1) {
37                                self.lastCoordinateValue = sliderVal
38                            }
39                            if v.translation.width > 0 {
40                                let nextCoordinateValue = min(maxValue, self.lastCoordinateValue + v.translation.width)
41                                self.value = (nextCoordinateValue / scaleFactor)
42                            } else {
43                                let nextCoordinateValue = max(0.0, self.lastCoordinateValue + v.translation.width)
44                                self.value = (nextCoordinateValue / scaleFactor)
45                            }
46                        }
47                )
48            }
49        }
50    }
51}

The ContentView is similar to before, except a new rating is added with a circle showing the chosen star rating.

 1struct ContentView: View {
 2    @State private var rating1 = 2.5
 3    @State private var rating2 = 6.3
 4    @State private var rating3 = 2.4
 5    @State private var rating4 = 2.4
 6    
 7    var body: some View {
 8        ZStack {
 9            Color(red: 214/255, green: 232/255, blue: 248/255)
10                .edgesIgnoringSafeArea(.all)
11            
12            VStack(spacing:40) {
13                VStack(spacing:0) {
14                    Text("Star Rating = \(rating1, specifier: "%.1F") out of 5")
15                    StarRatingView(value: $rating1, stars: 5)
16                        .frame(width: 250, height: 50, alignment: .center)
17                }
18                
19                VStack(spacing:0) {
20                    Text("Star Rating = \(rating2, specifier: "%.1F") out of 10")
21                    StarRatingView(value: $rating2, stars: 10)
22                        .frame(width: 250, height: 30, alignment: .center)
23                }
24                
25                VStack(spacing:0) {
26                    Text("Star Rating = \(rating3, specifier: "%.1F") out of 3")
27                    StarRatingView(value: $rating3, stars: 3)
28                        .frame(width: 250, height: 100, alignment: .center)
29                }
30                
31                HStack(spacing:10) {
32                    StarRatingView(value: $rating4, stars: 5)
33                        .frame(width: 200, height: 40, alignment: .center)
34                    Circle()
35                        .fill(.gray)
36                        .frame(width: 40, height: 40, alignment: .center)
37                        .overlay(
38                            Text("\(rating4, specifier: "%.1F")")
39                                .foregroundColor(.white)
40                                .fontWeight(.bold)
41                        )
42                }
43                
44                Spacer()
45            }
46        }
47    }
48}

Set star rating with yellow color changing with Drag Gesture

Set star rating with yellow color changing with Drag Gesture

Set the star rating on initial touch point

The star rating is adjusted with the DragGesture, but it starts from it's current position and slides as the finger is dragged across the screen. This can create a disconnect between the user and the star rating component. The expectation is that the current star rating would match the touch-point of the finger. This is a throw-back to treating the DragGesture on the stars as a slider. The fix is to set the lastCoordinateValue to the x coordinate of the current location when the DragGesture changes.

 1struct StarRatingView: View {
 2    @Binding var value: Double
 3    var stars: Int = 5
 4    
 5    @State var lastCoordinateValue: CGFloat = 0.0
 6    
 7    var body: some View {
 8        GeometryReader { gr in
 9            let ratingWidth = gr.size.width * value / Double(stars)
10            let starWidth = gr.size.width / Double(stars)
11            let radius = starWidth * 0.01
12            
13            let maxValue = gr.size.width
14            let scaleFactor = maxValue / Double(stars)
15            
16            ZStack {
17                HStack(spacing:0) {
18                    Rectangle()
19                        .fill(.yellow)
20                        .frame(width: ratingWidth)
21                    Rectangle()
22                        .fill(.clear)
23                }
24                
25                HStack(spacing:0) {
26                    ForEach(1...stars, id:\.self) { _ in
27                        StarShape(points: 5, cornerRadius: radius, isCutout: true)
28                            .fill(Color.gray, style: FillStyle(eoFill: true, antialiased: true))
29                            .frame(width: starWidth, height: gr.size.height, alignment: .center)
30                    }
31                }
32                .gesture(
33                    DragGesture(minimumDistance: 0)
34                        .onChanged { v in
35                            if (abs(v.translation.width) < 0.1) {
36                                self.lastCoordinateValue = v.location.x
37                            }
38                            if v.translation.width > 0 {
39                                let nextCoordinateValue = min(maxValue, self.lastCoordinateValue + v.translation.width)
40                                self.value = (nextCoordinateValue / scaleFactor)
41                            } else {
42                                let nextCoordinateValue = max(0.0, self.lastCoordinateValue + v.translation.width)
43                                self.value = (nextCoordinateValue / scaleFactor)
44                            }
45                        }
46                )
47            }
48        }
49    }
50}

No change is needed to the ContentView and the behavior is that the star rating and yellow color jump to the finger location and move with the DragGesture.

Interactive Star Rating with yellow color changing with Drag Gesture

Interactive Star Rating with yellow color changing with Drag Gesture

Interactive Star Rating changing with Drag Gesture

Interactive Star Rating changing with Drag Gesture

Conclusion

This article built on the work done in Create a Star cutout shape in SwiftUI and Star with rounded corners in SwiftUI to create a star rating SwiftUI view. The number of stars in the view can be set as well as the value for the star rating. A DragGesture is used to make the star rating interactive with the value bound to the calling view.

Star with rounded corners in SwiftUI

Eric Callanan — Sunday, 12 Dec 2021

The Star shape used in the Star cutout has sharp corners. This article shows how to modify the shape to create stars with rounded corners. The radius of the corner can be set as a parameter to specify the rounding of the outer and inner corners of the star.

Star shapes

Here are the starting star shapes as defined in Create a Star cutout shape in SwiftUI. The number of points in the star can be passed in as a parameter and it has a default of 5.

 1struct StarShape: Shape {
 2    var points = 5
 3    var cutout = false
 4    var circle = false
 5    
 6    func Cartesian(length:Double, angle:Double) -> CGPoint {
 7        return CGPoint(x: length * cos(angle),
 8                       y: length * sin(angle))
 9    }
10    
11    func path(in rect: CGRect) -> Path {
12        // centre of the containing rect
13        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
14        // Adjust center down for odd number of sides less than 8
15        if points%2 == 1 && points < 8 && !circle {
16            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
17        }
18        
19        // radius of a circle that will fit in the rect
20        let outerRadius = (Double(min(rect.width,rect.height)) / 2.0) * 0.9
21        let innerRadius = outerRadius * 0.4
22        let offsetAngle = (Double.pi / Double(points)) + Double.pi/2.0
23        
24        var vertices:[CGPoint] = []
25        for i in 0..<points{
26            // Calculate the angle in Radians
27            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
28            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
29            vertices.append(CGPoint(x: outerPoint.x + center.x, y: outerPoint.y + center.y))
30            
31            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
32            let innerPoint = Cartesian(length: (innerRadius),
33                                       angle: (angle2))
34            vertices.append(CGPoint(x: innerPoint.x + center.x, y: innerPoint.y + center.y))
35        }
36        
37        let path = Path() { path in
38            if cutout {
39                if circle {
40                    path.addPath(Circle().path(in: rect))
41                    
42                } else {
43                    path.addPath(Rectangle().path(in: rect))
44                }
45            }
46            for (n, pt) in vertices.enumerated() {
47                n == 0 ? path.move(to: pt) : path.addLine(to: pt)
48            }
49            path.closeSubpath()
50        }
51        return path
52    }
53}

The star shapes are designed to fill the enclosing frame. Here are examples of 5, 6 and 7 pointed stars.

 1    VStack {
 2        StarShape(points: 5)
 3            .fill(Color.orange)
 4        .frame(width: 150, height: 150, alignment: .center)
 5        
 6        StarShape(points: 6)
 7            .fill(Color.orange)
 8        .frame(width: 150, height: 150, alignment: .center)
 9        
10        StarShape(points: 7)
11            .fill(Color.orange)
12        .frame(width: 150, height: 150, alignment: .center)                
13    }

Star shapes with sharp corners

Star shapes with sharp corners

Use arc to round the corners

The stars above have sharp corners and can seem a little harsh. It would be nice to soften the star shape by rounding the corners in the star. Each point in the star is composed of two straight lines. An arc path can be added at each point to define the round corners. The radius of this arc will determine how round the points are.

 1        VStack {
 2            StarShape()
 3                .stroke(Color.red, lineWidth: 2)
 4                .frame(width: 100, height: 100, alignment: .center)
 5            
 6            HStack(spacing:20) {
 7                ZStack {
 8                    Rectangle()
 9                        .stroke(Color.gray)
10                        .frame(width: 100, height: 100, alignment: .center)
11                    
12                    Path { path in
13                        path.move(to: CGPoint(x: 39.4, y: 40.4))
14                        path.addLine(to: CGPoint(x: 50, y: 10))
15                        path.addLine(to: CGPoint(x: 60.5, y: 40.4))
16                    }
17                    .stroke(Color.red, lineWidth: 2)
18                    .frame(width: 100, height: 100, alignment: .center)
19                }
20                ZStack {
21                    Rectangle()
22                        .stroke(Color.gray)
23                        .frame(width: 100, height: 100, alignment: .center)
24                    
25                    Path { path in
26                        path.move(to: CGPoint(x: 39.4, y: 40.4))
27                        path.addLine(to: CGPoint(x: 45, y: 10))
28                        path.addArc(center: .init(x: 50, y: 10),
29                                    radius: 5,
30                                    startAngle: Angle(radians: Double.pi * (-0.80)),
31                                    endAngle: Angle(radians: Double.pi * (-0.20)),
32                                    clockwise: false
33                        )
34                        path.addLine(to: CGPoint(x: 60.5, y: 40.4))
35                    }
36                    .stroke(Color.red, lineWidth: 2)
37                    .frame(width: 100, height: 100, alignment: .center)
38                }
39                ZStack {
40                    Rectangle()
41                        .stroke(Color.gray)
42                        .frame(width: 100, height: 100, alignment: .center)
43                    
44                    Path { path in
45                        path.move(to: CGPoint(x: 39.4, y: 40.4))
46                        path.addLine(to: CGPoint(x: 48, y: 10))
47                        path.addArc(center: .init(x: 50, y: 10),
48                                    radius: 2,
49                                    startAngle: Angle(radians: Double.pi * (-0.80)),
50                                    endAngle: Angle(radians: Double.pi * (-0.20)),
51                                    clockwise: false
52                        )
53                        path.addLine(to: CGPoint(x: 60.5, y: 40.4))
54                    }
55                    .stroke(Color.red, lineWidth: 2)
56                    .frame(width: 100, height: 100, alignment: .center)
57                }
58            }
59
60            Spacer()
61        }

Add an arc to round the points of the Star shape

Add an arc to round the points of the Star shape

Update Star shape with rounded points

The approach to creating the star shape inside a given frame is to first create a number of segments for the star. The structure for the segment is enough to create a single point in the star. Segment is created using two points and two doubles. The center point is the center of an arc for the rounded curve, this was the original outer point in the star with sharp corners. The angle is the angle that defines the pointing direction of this segment point. The radius is the radius or the rounding arc. Finally, the line2 point is the destination of a straight line after the arc path.

The line point for connecting the previous segment to this one is a computed property based on the rounding radius and the angle of the starpoint. The start and end angles for the arc are equally distributed on either side of the segment point angle. This is set to less than 90 degrees on either side of the line straight through the segment point. More work could be done to calculate the exact angles that would result in accurate tangents to the rounding arc, and these would vary slightly depending on the number of points on the star. For now, the angle is fixed at 81 degrees or 0.45 of PI.

 1struct Segment {
 2    let center: CGPoint
 3    let angle: Double
 4    let radius: Double
 5    let line2: CGPoint
 6    
 7    var line: CGPoint {
 8        get {
 9            let pt = Cartesian(length: radius, angle: arcAngle1)
10            return CGPoint(x: pt.x + center.x, y: pt.y + center.y)
11        }
12    }
13    
14    var arcAngle1: Double {
15        get { self.angle - (Double.pi * (0.45)) }
16    }
17    
18    var arcAngle2: Double {
19        get { self.angle + (Double.pi * (0.45)) }
20    }
21}

The function to convert polar coordinates to cartesian coordinates is moved outside the star shape so it can be used by the segment structure as well as the star shape.

1func Cartesian(length: Double, angle: Double) -> CGPoint {
2    return CGPoint(x: length * cos(angle),
3                   y: length * sin(angle))
4}

StarShape2 is defined so that the original StarShape can be used for comparison. The initial loop through the number of points on the star calculated the angle for each point, as well as the inner and outer points. These points were added to a list of points for the star. In the star shape with rounded corners, the same points are calculated, but the points as well as the outer point angle are used to create a Segment. A list of segments is created for the star.

The path for the Star shape is created by iterating over the list of segments adding a line, an arc and a line for each segment.

 1struct StarShape2: Shape {
 2    var points = 5
 3    var cornerRadius = 3.0
 4    var isCutout = false
 5    var isCircleOutline = false
 6    
 7    func path(in rect: CGRect) -> Path {
 8        // centre of the containing rect
 9        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
10        // Adjust center down for odd number of sides less than 8
11        if points%2 == 1 && points < 8 && !isCircleOutline {
12            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
13        }
14        
15        // radius of a circle that will fit in the rect
16        let outerRadius = (Double(min(rect.width,rect.height)) / 2.0) * 0.8
17        let innerRadius = outerRadius * 0.4
18        let offsetAngle = Double.pi * (-0.5)
19        
20        var starSegments:[Segment] = []
21        for i in 0..<(points){
22            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
23            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
24            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
25            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
26            
27            let segment = Segment(
28                center: CGPoint(x: outerPoint.x + center.x,
29                                y: outerPoint.y + center.y),
30                angle: angle1,
31                radius: cornerRadius,
32                line2: CGPoint(x: innerPoint.x + center.x,
33                               y: innerPoint.y + center.y))
34            starSegments.append(segment)
35        }
36        
37        let path = Path() { path in
38            if isCutout {
39                if isCircleOutline {
40                    path.addPath(Circle().path(in: rect))
41                    
42                } else {
43                    path.addPath(Rectangle().path(in: rect))
44                }
45            }
46            for (n, op) in starSegments.enumerated() {
47                n == 0 ? path.move(to: op.line) : path.addLine(to: op.line)
48                path.addArc(center: op.center,
49                            radius: op.radius,
50                            startAngle: Angle(radians: op.arcAngle1),
51                            endAngle: Angle(radians: op.arcAngle2),
52                            clockwise: false)
53                path.addLine(to: op.line2)
54            }
55            path.closeSubpath()
56        }
57        return path
58    }
59}

A number of stars with different number of points all with the new rounded corners.

 1struct StarShapeView6: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                HStack {
 9                    StarShape2()
10                        .fill(Color.blue)
11                        .frame(width: 150, height: 150, alignment: .center)
12                    StarShape2()
13                        .stroke(Color.blue, lineWidth: 3)
14                        .frame(width: 150, height: 150, alignment: .center)
15                }
16                HStack {
17                    StarShape2(points:4)
18                        .fill(Color.blue)
19                        .frame(width: 150, height: 150, alignment: .center)
20                    StarShape2(points:6)
21                        .fill(Color.blue)
22                        .frame(width: 150, height: 150, alignment: .center)
23                }
24                HStack {
25                    StarShape2(points:7)
26                        .fill(Color.blue)
27                        .frame(width: 150, height: 150, alignment: .center)
28                    StarShape2(points:8)
29                        .fill(Color.blue)
30                        .frame(width: 150, height: 150, alignment: .center)
31                }
32                Spacer()
33            }
34        }
35    }
36}

Star shapes with different number of points with rounded points

Star shapes with different number of points with rounded points

How round should the corners be?

The cornerRadius is an optional parameter on StarShape2, which allows for the creation of numerous stars with the same number of points and varying size of corner radius on the arc for the rounded corners. Here are a number of 5-pointed stars with different size radius for the rounded corners.

 1struct StarShapeView7: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack(spacing:20) {
 8                ForEach([2,3,10], id: \.self) { i in
 9                    HStack(spacing:30) {
10                        VStack(spacing:0) {
11                            let r = Double(i)
12                            StarShape2(points: 5, cornerRadius: r)
13                                .fill(Color.blue)
14                                .frame(width: 150, height: 150)
15                            Text("Corner Radius = \(r, specifier: "%.0F")")
16                                .font(.footnote)
17                        }
18
19                        VStack(spacing:0) {
20                            let r = Double(i * 2)
21                            StarShape2(points: 5, cornerRadius: r)
22                                .fill(Color.blue)
23                                .frame(width: 150, height: 150)
24                            Text("Corner Radius = \(r, specifier: "%.0F")")
25                                .font(.footnote)
26                        }
27                    }
28                }
29                Spacer()
30            }
31        }
32    }
33}

It is a matter of opinion as to which looks better when the radius is 2, 3 or 4. But I think we can agree that rounded corner radius of 10 or 20 look ridiculous - or at least, have lost the star look.

Five-pointed stars with different radius for rounded points

Five-pointed stars with different radius for rounded points

Round inner corners in Star shape

Now the inner corners look sharp after rounding the outer corners! Another arc can be used in the inner corners to round them and soften the shape. The parameters to the segment are renamed and extra parameters are added as well as extra computed properties for the arc on the inner corner.

 1struct Segment {
 2    let outerCenter: CGPoint
 3    let outerAngle: Double
 4    let outerRadius: Double
 5    let innerCenter: CGPoint
 6    let innerAngle: Double
 7
 8    var line: CGPoint {
 9        get {
10            let pt = Cartesian(length: outerRadius, angle: outerStartAngle)
11            return CGPoint(x: pt.x + outerCenter.x, y: pt.y + outerCenter.y)
12        }
13    }
14    
15    var line2: CGPoint {
16        get {
17            let pt = Cartesian(length: outerRadius, angle: innerStartAngle)
18            return CGPoint(x: pt.x + innerCenter.x, y: pt.y + innerCenter.y)
19        }
20    }
21    
22    var outerStartAngle: Double {
23        get { self.outerAngle - (Double.pi * (0.45)) }
24    }
25    var outerEndAngle: Double {
26        get { self.outerAngle + (Double.pi * (0.45)) }
27    }
28    
29    var innerStartAngle: Double {
30        get { self.innerAngle - (Double.pi * (0.7)) }
31    }
32    var innerEndAngle: Double {
33        get { self.innerAngle + (Double.pi * (0.7)) }
34    }
35}

StarShape2 is updated to pass in the extra parameters in the creation of each segment. In addition, the creation of the path is updated to add a line, an arc, a line and another arc for each segment in the list of segments. Note the direction of the inner arc is opposite to the direction of the outer arc.

 1struct StarShape2: Shape {
 2    var points = 5
 3    var cornerRadius = 3.0
 4    var isCutout = false
 5    var isCircleOutline = false
 6    
 7    func path(in rect: CGRect) -> Path {
 8        // centre of the containing rect
 9        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
10        // Adjust center down for odd number of sides less than 8
11        if points%2 == 1 && points < 8 && !isCircleOutline {
12            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
13        }
14        
15        // radius of a circle that will fit in the rect with some padding
16        let outerRadius = (Double(min(rect.width,rect.height)) / 2.0) * 0.9
17        let innerRadius = outerRadius * 0.4
18        let offsetAngle = Double.pi * (-0.5)
19        
20        var starSegments:[Segment] = []
21        for i in 0..<(points){
22            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
23            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
24            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
25            let innerPoint = Cartesian(length: (innerRadius), angle: (angle2))
26            
27            let segment = Segment(
28                outerCenter: CGPoint(x: outerPoint.x + center.x,
29                                y: outerPoint.y + center.y),
30                outerAngle: angle1,
31                outerRadius: cornerRadius,
32                innerCenter: CGPoint(x: innerPoint.x + center.x,
33                                     y: innerPoint.y + center.y),
34                innerAngle: angle2)
35            starSegments.append(segment)
36        }
37        
38        let path = Path() { path in
39            if isCutout {
40                if isCircleOutline {
41                    path.addPath(Circle().path(in: rect))
42                    
43                } else {
44                    path.addPath(Rectangle().path(in: rect))
45                }
46            }
47            for (n, seg) in starSegments.enumerated() {
48                n == 0 ? path.move(to: seg.line) : path.addLine(to: seg.line)
49                path.addArc(center: seg.outerCenter,
50                            radius: seg.outerRadius,
51                            startAngle: Angle(radians: seg.outerStartAngle),
52                            endAngle: Angle(radians: seg.outerEndAngle),
53                            clockwise: false)
54                path.addLine(to: seg.line2)
55                path.addArc(center: seg.innerCenter,
56                            radius: seg.outerRadius,
57                            startAngle: Angle(radians: seg.innerStartAngle),
58                            endAngle: Angle(radians: seg.innerEndAngle),
59                            clockwise: true)
60            }
61            path.closeSubpath()
62        }
63        return path
64    }
65}

The same view shows the updated stars with rounded inner and outer corners.

 1struct StarShapeView6: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 214/255, green: 232/255, blue: 248/255)
 5                .edgesIgnoringSafeArea(.all)
 6
 7            VStack {
 8                HStack {
 9                    StarShape2()
10                        .fill(Color.blue)
11                        .frame(width: 150, height: 150, alignment: .center)
12                    StarShape2()
13                        .stroke(Color.blue, lineWidth: 3)
14                        .frame(width: 150, height: 150, alignment: .center)
15                }
16                HStack {
17                    StarShape2(points:4)
18                        .fill(Color.blue)
19                        .frame(width: 150, height: 150, alignment: .center)
20                    StarShape2(points:6)
21                        .fill(Color.blue)
22                        .frame(width: 150, height: 150, alignment: .center)
23                }
24                HStack {
25                    StarShape2(points:7)
26                        .fill(Color.blue)
27                        .frame(width: 150, height: 150, alignment: .center)
28                    StarShape2(points:8)
29                        .fill(Color.blue)
30                        .frame(width: 150, height: 150, alignment: .center)
31                }
32                Spacer()
33            }
34        }
35    }
36}

Star shapes woth rounded inner and outer corners

Star shapes woth rounded inner and outer corners

This is the view with the 5-pointed stars with increasing corner radius sizes. Again, the stars with inner radius 10 or 20 look ridiculous. The inner radius of 20 is overlapping over multiple segments resulting is an interesting design pattern - but, no longer a star.

Five-pointed stars with different radius for inner and outer rounded corners

Five-pointed stars with different radius for inner and outer rounded corners

Star shape variations

Here are a number of stars using the Star Shape:

Stars with sharp corners
Stars with rounded corners
Solid and outline stars
Cutout stars
Stars with different number of points

The last shape on the bottom right is a 15 pointed star with a rounded corner radius of 14 in a frame that is 300 by 300. This results n the inner rounded corners overlapping and shows the potential of creating many different shapes based on a regular pattern.

 1    VStack {
 2        HStack {
 3            StarShape2(points: 5, cornerRadius: 0, isCutout: false, isCircleOutline: false)
 4                .fill(Color.red)
 5                .frame(width: 300, height: 300, alignment: .center)
 6            StarShape2(points: 5, cornerRadius: 0, isCutout: false, isCircleOutline: false)
 7                .stroke(Color.red, lineWidth: 3)
 8                .frame(width: 300, height: 300, alignment: .center)
 9            StarShape2(points: 5, cornerRadius: 0, isCutout: true, isCircleOutline: false)
10                .fill(Color.red, style: FillStyle(eoFill: true, antialiased: true))
11                .frame(width: 300, height: 300, alignment: .center)
12            StarShape2(points: 5, cornerRadius: 0, isCutout: true, isCircleOutline: true)
13                .fill(Color.red, style: FillStyle(eoFill: true, antialiased: true))
14                .frame(width: 300, height: 300, alignment: .center)
15        }
16        HStack {
17            StarShape2(points: 5, cornerRadius: 4, isCutout: false, isCircleOutline: false)
18                .fill(Color.red)
19                .frame(width: 300, height: 300, alignment: .center)
20            StarShape2(points: 5, cornerRadius: 4, isCutout: false, isCircleOutline: false)
21                .stroke(Color.red, lineWidth: 3)
22                .frame(width: 300, height: 300, alignment: .center)
23            StarShape2(points: 5, cornerRadius: 4, isCutout: true, isCircleOutline: false)
24                .fill(Color.red, style: FillStyle(eoFill: true, antialiased: true))
25                .frame(width: 300, height: 300, alignment: .center)
26            StarShape2(points: 5, cornerRadius: 4, isCutout: true, isCircleOutline: true)
27                .fill(Color.red, style: FillStyle(eoFill: true, antialiased: true))
28                .frame(width: 300, height: 300, alignment: .center)
29        }
30        HStack {
31            StarShape2(points: 5, cornerRadius: 4, isCutout: false, isCircleOutline: false)
32                .fill(Color.red)
33                .frame(width: 300, height: 300, alignment: .center)
34            StarShape2(points: 5, cornerRadius: 14, isCutout: false, isCircleOutline: false)
35                .fill(Color.red)
36                .frame(width: 300, height: 300, alignment: .center)
37            StarShape2(points: 7, cornerRadius: 4, isCutout: false, isCircleOutline: false)
38                .fill(Color.red)
39                .frame(width: 300, height: 300, alignment: .center)
40            StarShape2(points: 15, cornerRadius: 14, isCutout: false, isCircleOutline: false)
41                .fill(Color.red)
42                .frame(width: 300, height: 300, alignment: .center)
43        }
44        Spacer()
45    }

Various Star shapes with sharp corners, round corners and other variations

Various Star shapes with sharp corners, round corners and other variations

Conclusion

This article built on the basic star in Create a Star cutout shape in SwiftUI to add an arc and a line to the path for the star corners to produce a rounded pointed star. It is possible that the star segment could be broken down to just define one arc and line and this could be used for both the inner corner and outer corner. The star shape could expose more properties for customisation such as the radius of the inner circle or a separate rounding radius for the inner corners, so the inner corners could remain sharp while the outer corners are rounded. Another potential change could be to use a value between 0.0 and 1.0 for the corner radius and set this as percentage of the containing frame rather than point size. This would allow the Star shape be used in a variety of sizes without having to adjust the corner radius.

Source code for the StarShape is available on GitHub.

Create a Star cutout shape in SwiftUI

Eric Callanan — Sunday, 05 Dec 2021

Path can be used in SwiftUI to create practically any shape. I found creating a cutout shape difficult until I found that FillStyle can be used with the even-odd rule. This article shows how to create a shape outline where the outside can be colored and the center kept transparent to allow other content to show through. Shape cutouts can be used to frame content and help highlight the content for the user.

Using the SF Symbols

I first thought I could use the SF Symbol shapes by setting foreground and background colors. When using one of the sf-symbols like star.fill setting the opacity of the foreground just removes the foreground shape and reveals the background. The star symbol does show the content inside the Star, but also outside the star and setting a color on the background once again blocks out the whole background. Finally, there is an sf-symbol for star.square.fill, which has the star as the foreground as a square around a Star cutout. This is close to the desired effect with the content underneath shown through the star shape. There is a lot of padding around the shapes and configuration is limited.

1struct CakeView: View {
2    var body: some View {
3        Image("cake")
4            .resizable()
5            .scaledToFit()
6            .frame(width: 100, height: 100, alignment: .center)
7    }
8}

 1struct SFSymbolView: View {
 2    var body: some View {
 3        VStack(spacing:20) {
 4            CakeView()
 5            
 6            HStack(spacing:30) {
 7                ZStack {
 8                    CakeView()
 9                    Image(systemName: "star.fill")
10                        .font(.system(size: 130))
11                        .foregroundColor(Color.clear)
12                        .background(Color.green)
13                }
14                .frame(width: 150, height: 150, alignment: .center)
15
16                ZStack {
17                    CakeView()
18                    Image(systemName: "star.fill")
19                        .font(.system(size: 130))
20                        .foregroundColor(Color.red.opacity(0.5))
21                        .background(Color.green)
22                }
23                .frame(width: 150, height: 150, alignment: .center)
24            }
25            
26            HStack(spacing:30) {
27                ZStack {
28                    CakeView()
29                    Image(systemName: "star")
30                        .font(.system(size: 130))
31                        .foregroundColor(Color.red)
32                }
33                .frame(width: 150, height: 150, alignment: .center)
34                
35                ZStack {
36                    CakeView()
37                    Image(systemName: "star")
38                        .font(.system(size: 130))
39                        .foregroundColor(Color.red)
40                        .background(Color.green)
41                }
42                .frame(width: 150, height: 150, alignment: .center)
43            }
44            
45            HStack(spacing:30) {
46                ZStack {
47                    CakeView()
48                    Image(systemName: "star.square.fill")
49                        .font(.system(size: 130))
50                        .foregroundColor(Color.red)
51                        .background(Color.green.opacity(0.3))
52                }
53                .frame(width: 150, height: 150, alignment: .center)
54                
55                ZStack {
56                    CakeView()
57                    Image(systemName: "star.square.fill")
58                        .font(.system(size: 150))
59                        .foregroundColor(Color.red)
60                }
61                .frame(width: 150, height: 150, alignment: .center)
62            }
63            
64            Spacer()
65        }
66    }
67}

Using SF Symbol as cutout shape in a ZStack

Using SF Symbol as cutout shape in a ZStack

Using clipShape to frame an image

Use of shape rather than SF-symbol does provide more flexibility. The first two images use the stroke method to outline a shape over the background image. Increasing the linewidth of the shape can create a shape cutout, when it is combined with a clipped method so the view is clipped within its bounding frame. This is somewhat crude with less control over the size of the cutout as the stroke line width extends in both directions.

 1    HStack(spacing:30) {
 2        ZStack {
 3            Image("cake")
 4                .resizable()
 5                .scaledToFit()
 6                .frame(width: 120, height: 120, alignment: .center)
 7            Circle()
 8                .stroke(Color.green, lineWidth: 3.0)
 9                .frame(width: 120, height: 120, alignment: .center)
10        }
11        .frame(width: 150, height: 150, alignment: .center)
12        
13        ZStack {
14            Image("cake")
15                .resizable()
16                .scaledToFit()
17                .frame(width: 120, height: 120, alignment: .center)
18            Circle()
19                .stroke(Color.green, lineWidth: 60.0)
20                .frame(width: 150, height: 150, alignment: .center)
21                .clipped()
22        }
23        .frame(width: 150, height: 150, alignment: .center)
24    }

Instead of using a separate cutout shape over the image in a ZStack, we could use the clipShape method as was discussed in Displaying Images in SwiftUI to frame an image. This clipShape approach provides the ability to clip the view to any shape including a custom shape. This may be enough for most circumstances. Note that this is one view, so it will not work if the desire is to have a separate draggable cutout view.

 1    HStack(spacing:30) {
 2        Image("cake")
 3            .resizable()
 4            .scaledToFit()
 5            .frame(width: 120, height: 120, alignment: .center)
 6            .clipShape(Circle())
 7            .frame(width: 150, height: 150, alignment: .center)
 8            .background(Color.green)
 9        
10        Image("cake")
11            .resizable()
12            .scaledToFit()
13            .frame(width: 120, height: 120, alignment: .center)
14            .frame(width: 140, height: 80, alignment: .center)
15            .background(Color.white)
16            .clipShape(Ellipse())
17            .frame(width: 150, height: 130, alignment: .center)
18            .background(Color.green)
19    }

Another approach is to reverse the order of the views and clip the image over a view of the desired background. Again this is not a cutout shape, but may be sufficient if the entire view is static.

 1    HStack(spacing:30) {
 2        ZStack {
 3            Color.green
 4                .frame(width: 150, height: 150, alignment: .center)
 5            Image("cake")
 6                .resizable()
 7                .scaledToFit()
 8                .frame(width: 120, height: 120, alignment: .center)
 9                .clipShape(Circle())
10        }
11        .frame(width: 150, height: 150, alignment: .center)
12        
13        ZStack {
14            Color.green
15                .frame(width: 130, height: 150, alignment: .center)
16            Image("cake")
17                .resizable()
18                .scaledToFit()
19                .frame(width: 120, height: 120, alignment: .center)
20                .frame(width: 80, height: 120, alignment: .center)
21                .clipShape(Rectangle())
22        }
23        .frame(width: 150, height: 150, alignment: .center)
24    }

Using SwiftUI shapes to frame a view such as an image

Using SwiftUI shapes to frame a view such as an image

Using shapes in a Path with FillStyle

The solution to creating a stand-alone cutout shape is to use two paths with a FillStyle structure setting the Even–odd rule property to true. The first two images define a path to contain the paths of two shapes; a circle over a square and a square over a circle. Using the FillStyle with eoFill property set to true, the first shape is filled and the second shape is left transparent.

 1    HStack(spacing:30) {
 2        ZStack {
 3            Image("cake")
 4                .resizable()
 5                .scaledToFit()
 6                .frame(width: 120, height: 120, alignment: .center)
 7            Path { path in
 8                path.addPath(Rectangle().path(in: CGRect(x: 0, y: 0, width: 150, height: 150)))
 9                path.addPath(Circle().path(in: CGRect(x: 25, y: 25, width: 100, height: 100)))
10            }
11            .fill(Color.purple,
12                  style: FillStyle(eoFill: true, antialiased: true))
13        }
14        .frame(width: 150, height: 150, alignment: .center)
15        
16        ZStack {
17            Image("cake")
18                .resizable()
19                .scaledToFit()
20                .frame(width: 120, height: 120, alignment: .center)
21            Path { path in
22                path.addPath(Circle().path(in: CGRect(x: 0, y: 0, width: 150, height: 150)))
23                path.addPath(Rectangle().path(in: CGRect(x: 25, y: 25, width: 100, height: 100)))
24            }
25            .fill(Color.purple,
26                  style: FillStyle(eoFill: true, antialiased: true))
27        }
28        .frame(width: 150, height: 150, alignment: .center)
29    }

The second two images use Path to define custom shapes for the cutout shape. The next step would be to embed these path definitions into shapes of their own to simplify the main view.

 1   HStack(spacing:30) {
 2       ZStack {
 3           Image("cake")
 4               .resizable()
 5               .scaledToFit()
 6               .frame(width: 120, height: 120, alignment: .center)
 7           Path { path in
 8               path.addPath(Rectangle().path(in: CGRect(x: 0, y: 0, width: 150, height: 150)))
 9               path.move(to: CGPoint(x: 0, y: 75))
10               path.addLine(to: CGPoint(x: 75, y: 0))
11               path.addLine(to: CGPoint(x: 150, y: 75))
12               path.addLine(to: CGPoint(x: 75, y: 150))
13               path.addLine(to: CGPoint(x: 0, y: 75))
14           }
15           .fill(Color.purple,
16                 style: FillStyle(eoFill: true, antialiased: true))
17       }
18       .frame(width: 150, height: 150, alignment: .center)
19       
20       ZStack {
21           Image("cake")
22               .resizable()
23               .scaledToFit()
24               .frame(width: 120, height: 120, alignment: .center)
25           Path { path in
26               path.addPath(Rectangle().path(in: CGRect(x: 0, y: 0, width: 150, height: 150)))
27               path.move(to: CGPoint(x: 0, y: 75))
28               path.addQuadCurve(to: CGPoint(x: 75, y: 0),
29                                 control: CGPoint(x: 75, y: 75))
30               path.addQuadCurve(to: CGPoint(x: 150, y: 75),
31                                 control: CGPoint(x: 75, y: 75))
32               path.addQuadCurve(to: CGPoint(x: 75, y: 150),
33                                 control: CGPoint(x: 75, y: 75))
34               path.addQuadCurve(to: CGPoint(x: 0, y: 75),
35                                 control: CGPoint(x: 75, y: 75))                    }
36           .fill(Color.purple,
37                 style: FillStyle(eoFill: true, antialiased: true))
38       }
39       .frame(width: 150, height: 150, alignment: .center)
40   }

Combining shapes in a path to frame a view such as an image

Combining shapes in a path to frame a view such as an image

Defining Star Shapes

A star shape is defined similar to the regular polygon defined in Animating a shape change in SwiftUI. In addition, to the outer points of the star, we need to define corresponding inner points. This is achieved by setting an inner circle (with a radius 0.4 times that of the outer circle) for the inner points of the star. By making the number of points in the star a variable the same shape can be used to create any star. Note there is a vertical adjustment down for the center of the circles when the number of points on the star is odd and less than 8. This is because although the star is centered inside a circle, which is centered in the frame - the star appears off-center when viewed in a solid Square.

 1struct StarShape: Shape {
 2    var points = 5
 3    
 4    func Cartesian(length:Double, angle:Double) -> CGPoint {
 5        return CGPoint(x: length * cos(angle),
 6                       y: length * sin(angle))
 7    }
 8    
 9    func path(in rect: CGRect) -> Path {
10        // centre of the containing rect
11        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
12        // Adjust center down for odd number of sides less than 8
13        if points%2 == 1 && points < 8 {
14            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
15        }
16        
17        // radius of a circle that will fit in the rect
18        let outerRadius = Double(min(rect.width,rect.height)) / 2.0
19        let innerRadius = outerRadius * 0.4
20        let offsetAngle = (Double.pi / Double(points)) + Double.pi/2.0
21        
22        var vertices:[CGPoint] = []
23        for i in 0..<points{
24            // Calculate the angle in Radians
25            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
26            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
27            vertices.append(CGPoint(x: outerPoint.x + center.x, y: outerPoint.y + center.y))
28            
29            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
30            let innerPoint = Cartesian(length: (innerRadius),
31                                       angle: (angle2))
32            vertices.append(CGPoint(x: innerPoint.x + center.x, y: innerPoint.y + center.y))
33        }
34        
35        let path = Path() { path in
36            for (n, pt) in vertices.enumerated() {
37                n == 0 ? path.move(to: pt) : path.addLine(to: pt)
38            }
39            path.closeSubpath()
40        }
41        return path
42    }
43}

A number of stars are displayed with different number of points to exercise the use of the StarShape

 1    var body: some View {
 2        VStack(spacing:20) {
 3            ForEach([3,4,5], id: \.self) { i in
 4                HStack(spacing:30) {
 5                    VStack(spacing:0) {
 6                        let points = i
 7                        StarShape(points: points)
 8                            .fill(Color.orange)
 9                            .frame(width: 150, height: 150)
10                        Text("\(points) points")
11                    }
12
13                    VStack(spacing:0) {
14                        let points = i * 3
15                        StarShape(points: points)
16                            .fill(Color.orange)
17                            .frame(width: 150, height: 150)
18                        Text("\(points) points")
19                    }
20                }
21            }
22            Spacer()
23        }
24    }

Star shapes with different number of points - solid color

Star shapes with different number of points - solid color

The same stars are displayed using stroke to show the stars outline.

 1    var body: some View {
 2        VStack(spacing:20) {
 3            ForEach([3,4,5], id: \.self) { i in
 4                HStack(spacing:30) {
 5                    VStack(spacing:0) {
 6                        let points = i
 7                        StarShape(points: points)
 8                            .stroke(Color.orange, lineWidth: 3.0)
 9                            .frame(width: 150, height: 150)
10                        Text("\(points) points")
11                    }
12
13                    VStack(spacing:0) {
14                        let points = i * 3
15                        StarShape(points: points)
16                            .stroke(Color.orange, lineWidth: 3.0)
17                            .frame(width: 150, height: 150)
18                        Text("\(points) points")
19                    }
20                }
21            }
22            Spacer()
23        }
24    }

Star shapes with different number of points - Outline using stroke

Star shapes with different number of points - Outline using stroke

Star cutout shape

One simple change can be made to the StarShape to allow it to be displayed as a cutout shape rather than a solid shape. Add an extra boolean parameter cutout with a default of false, so the existing shapes stay the same. Add a conditional step to add a Rectangle path for the containing frame to the start of the path definition when the cutout parameter is set to true.

 1struct StarShape: Shape {
 2    var points = 5
 3    var cutout = false
 4    
 5    func Cartesian(length:Double, angle:Double) -> CGPoint {
 6        return CGPoint(x: length * cos(angle),
 7                       y: length * sin(angle))
 8    }
 9    
10    func path(in rect: CGRect) -> Path {
11        // centre of the containing rect
12        var center = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
13        // Adjust center down for odd number of sides less than 8
14        if points%2 == 1 && points < 8 {
15            center = CGPoint(x: center.x, y: center.y * ((Double(points) * (-0.04)) + 1.3))
16        }
17        
18        // radius of a circle that will fit in the rect
19        let outerRadius = Double(min(rect.width,rect.height)) / 2.0
20        let innerRadius = outerRadius * 0.4
21        let offsetAngle = (Double.pi / Double(points)) + Double.pi/2.0
22        
23        var vertices:[CGPoint] = []
24        for i in 0..<points{
25            // Calculate the angle in Radians
26            let angle1 = (2.0 * Double.pi/Double(points)) * Double(i)  + offsetAngle
27            let outerPoint = Cartesian(length: outerRadius, angle: angle1)
28            vertices.append(CGPoint(x: outerPoint.x + center.x, y: outerPoint.y + center.y))
29            
30            let angle2 = (2.0 * Double.pi/Double(points)) * (Double(i) + 0.5)  + offsetAngle
31            let innerPoint = Cartesian(length: (innerRadius),
32                                       angle: (angle2))
33            vertices.append(CGPoint(x: innerPoint.x + center.x, y: innerPoint.y + center.y))
34        }
35        
36        let path = Path() { path in
37            if cutout {
38                path.addPath(Rectangle().path(in: rect))
39            }
40            for (n, pt) in vertices.enumerated() {
41                n == 0 ? path.move(to: pt) : path.addLine(to: pt)
42            }
43            path.closeSubpath()
44        }
45        return path
46    }
47}

Setting the cutout to true renders the shape with the outside filled in and the inside star shape transparent. When the cutout parameter is set to false then the star is rendered as before.

 1    var body: some View {
 2        VStack(spacing:20) {
 3            ForEach([5,6,7], id: \.self) { i in
 4                HStack(spacing:30) {
 5                    VStack(spacing:0) {
 6                        let points = i
 7                        StarShape(points: points, cutout: true)
 8                            .fill(Color(red: 0.68, green: 0.29, blue: 0.29),
 9                                  style: FillStyle(eoFill: true))
10                            .frame(width: 150, height: 150)
11                        Text("\(points) points")
12                    }
13                    
14                    VStack(spacing:0) {
15                        let points = i
16                        StarShape(points: points, cutout: false)
17                            .fill(Color(red: 0.68, green: 0.29, blue: 0.29),
18                                  style: FillStyle(eoFill: true))
19                            .frame(width: 150, height: 150)
20                        Text("\(points) points")
21                    }
22                }
23            }
24            Spacer()
25        }
26    }

Star cutout shapes for 5, 6 and 7-sided stars

Star cutout shapes for 5, 6 and 7-sided stars

Using Cutout Shapes

This cutout behavior can used with any custom shape such as the heart defined in Create a blob shape in SwiftUI. The cutout parameter needs to be added and the rectangle path added to the start of the path when the cutout parameter is true. That's it! - the heart shape can now be used as a cutout shape.

 1struct HeartShape: Shape {
 2    var cutout = false
 3    
 4    func path(in rect: CGRect) -> Path {
 5        let size = min(rect.width, rect.height)
 6        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 7        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 8
 9        func offsetPoint(p: CGPoint) -> CGPoint {
10            return CGPoint(x: p.x + xOffset, y: p.y+yOffset)
11        }
12        var path = Path()
13
14        if cutout {
15            path.addPath(Rectangle().path(in: rect))
16        }
17
18        path.move(to: offsetPoint(p: (CGPoint(x: (size * 0.50), y: (size * 0.25)))))
19        path.addCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.25))),
20                      control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))),
21                      control2: offsetPoint(p: CGPoint(x: 0, y: 0)))
22        path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: size)),
23                      control1: offsetPoint(p: CGPoint(x: 0, y: (size * 0.60))),
24                      control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))))
25        path.addCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.25))),
26                      control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))),
27                      control2: offsetPoint(p: CGPoint(x: size, y: (size * 0.60))))
28        path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.25))),
29                      control1: offsetPoint(p: CGPoint(x: size, y: 0)),
30                      control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))))
31        return path
32    }
33}

Here the star and heart cutout shapes are used to frame the cake image.

 1    var body: some View {
 2        VStack(spacing:40) {
 3            Text("Cutout Shapes")
 4                .font(.title2)
 5                .fontWeight(.bold)
 6            
 7            ZStack {
 8                Image("cake")
 9                    .resizable()
10                    .scaledToFit()
11                    .frame(width: 200, height: 200)
12                    .frame(width: 180, height: 180)
13                    .clipped()
14
15                StarShape(points: 5, cutout: true)
16                    .fill(Color(red: 0.68, green: 0.29, blue: 0.29),
17                          style: FillStyle(eoFill: true))
18                    .frame(width: 200, height: 180)
19            }
20            
21            ZStack {
22                Image("cake")
23                    .resizable()
24                    .scaledToFit()
25                    .frame(width: 200, height: 200)
26                    .frame(width: 180, height: 180)
27                    .clipped()
28                
29                HeartShape(cutout: true)
30                    .fill(Color(red: 0.68, green: 0.29, blue: 0.29),
31                          style: FillStyle(eoFill: true))
32                    .frame(width: 200, height: 180)
33            }
34            
35            Spacer()
36        }
37    }

Star and Heart cutout shapes used to frame an image

Star and Heart cutout shapes used to frame an image

Conclusion

It is easier than I first perceived to create a cutout shape in SwiftUI. The trick is to use multiple paths in the shape definition and to set the eoFill parameter to true of the FillStyle on the shape.

Create a line chart in SwiftUI

Eric Callanan — Sunday, 14 Nov 2021

A line chart is a graphical representation of changes in some data over time or between categories. The chart consists of two axes; x-axis is the horizontal axis representing the time change; and y-axis is the vertical axis representing the magnitude of the data. This article demonstrates how to create simple line charts using shapes in SwiftUI.

A Line chart is great for showing a change over time or showing differences between categories. Line charts are also useful to compare the change in a number of variables relative to each other. Data presented in a line chart can be much more quickly and easily understood than the same data presented in a table.

Draw a line joining a number of points

Start by defining a LineShape that takes a list of double values and uses Path to draw lines from one value to the next. The x-axis is divided into the number of data points with values between 0.0 and 1.0 (this will be addressed later). This is similar to the LineShape shown in How to animate a Shape change in SwiftUI, except the animation is not required and has been removed.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3
 4    func path(in rect: CGRect) -> Path {
 5        let xIncrement = (rect.width / (CGFloat(yValues.count) - 1))
 6        var path = Path()
 7        path.move(to: CGPoint(x: 0.0,
 8                              y: yValues[0] * Double(rect.height)))
 9        for i in 1..<yValues.count {
10            let pt = CGPoint(x: (Double(i) * Double(xIncrement)),
11                             y: (yValues[i] * Double(rect.height)))
12            path.addLine(to: pt)
13        }
14        return path
15    }
16}

 1struct ContentView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Line Chart")
 5            
 6            ZStack {
 7                Rectangle()
 8                    .stroke(Color.gray, lineWidth: 3.0)
 9                    .frame(width: 300, height: 300, alignment: .center)
10                
11                LineShape(yValues: [0.2, 0.4, 0.3, 0.8, 0.5])
12                    .stroke(Color.red, lineWidth: 2.0)
13                    .frame(width: 300, height: 300, alignment: .center)
14            }
15            
16            Spacer()
17        }
18    }   
19}

Initial line defaults to 0 on top resulting is y-axis reversed

Initial line defaults to 0 on top resulting is y-axis reversed

Set y-axis zero on bottom

The default coordinate system in iOS is to start with (0,0) at the top left with the y-coordinate increasing down the screen. So the initial line chart seems to have the reverse y values, as line charts usually have the y-axis increasing from bottom to top. This is corrected by subtracting the y-values from 1.0 before adjusting for height in the LineShape.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3
 4    func path(in rect: CGRect) -> Path {
 5        let xIncrement = (rect.width / (CGFloat(yValues.count) - 1))
 6        var path = Path()
 7        path.move(to: CGPoint(x: 0.0,
 8                              y: (1.0 - yValues[0]) * Double(rect.height)))
 9        for i in 1..<yValues.count {
10            let pt = CGPoint(x: (Double(i) * Double(xIncrement)),
11                             y: (1.0 - yValues[i]) * Double(rect.height))
12            path.addLine(to: pt)
13        }
14        return path
15    }
16}

Line chart with y-axis corrected for 0 on bottom

Line chart with y-axis corrected for 0 on bottom

Create layout for Line Chart

Create a number of SwiftUI views to layout the Line chart - similar to the bar chart layout in How to create a Bar Chart in SwiftUI. LineChartView is composed of a header and a chart area, where the chart area uses the LineShape to plot the line. This separation makes it easier to develop the different sections and multiple charts can be added to the main view to ensure the results are as expected.

 1struct ContentView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                Text("Line Chart")
 9                
10                LineChartView(
11                    title: "the chart title",
12                    data: [0.2, 0.4, 0.3, 0.8, 0.5])
13                    .frame(width: 300, height: 300, alignment: .center)
14                
15                Spacer().frame(height:50)
16                
17                HStack {
18                    LineChartView(
19                        title: "One",
20                        data: [0.88, 0.76, 0.92, 0.18, 0.7, 0.51, 0.66, 0.35, 0.53])
21                        .frame(width: 100, height: 100, alignment: .center)
22                    
23                    Spacer().frame(width:50)
24
25                    LineChartView(
26                        title: "Two",
27                        data: [0.88, 0.76, 0.92, 0.18, 0.7, 0.51, 0.66, 0.35, 0.53, 0.63, 0.58, 0.24, 0.39, 0.47, 0.34, 0.45, 0.64, 0.1, 0.27, 0.16, 0.37, 0.53, 0.62, 0.39, 0.32, 0.24, 0.42, 0.6, 0.79, 0.54, 0.26, 0.74, 0.61, 0.83, 0.1, 0.47, 0.14, 0.86, 0.73, 0.62, 0.23, 0.11, 0.78, 0.12, 0.23, 0.33, 0.11, 0.94, 0.74, 0.19])
28                        .frame(width: 150, height: 100, alignment: .center)
29                }
30                
31                Spacer()
32            }
33        }
34    }
35}

 1struct LineChartView: View {
 2    var title: String
 3    var data: [Double]
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let headHeight = gr.size.height * 0.10
 8            VStack {
 9                ChartHeaderView(title: title, height: headHeight)
10                ChartAreaView(data: data)
11            }
12        }
13    }
14}

1struct ChartHeaderView: View {
2    var title: String
3    var height: CGFloat
4    
5    var body: some View {
6        Text(title)
7            .frame(height: height)
8    }
9}

 1struct ChartAreaView: View {
 2    var data: [Double]
 3    
 4    var body: some View {
 5        ZStack {
 6            RoundedRectangle(cornerRadius: 5.0)
 7                .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
 8            
 9            LineShape(yValues: data)
10                .stroke(Color.red, lineWidth: 2.0)
11        }
12    }
13}

Line charts composed of multiple SwiftUI views

Line charts composed of multiple SwiftUI views

Allow range of numbers on y-axis

The initial chart only allows for y-values between 0.0 and 1.0. Change the LineShape to set the y-axis based on the max value to plot. The y-coordinate of each point is relative to the maximum value in the data series.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3    
 4    func path(in rect: CGRect) -> Path {
 5        let xIncrement = (rect.width / (CGFloat(yValues.count) - 1))
 6        let factor = rect.height / CGFloat(yValues.max() ?? 1.0)
 7        var path = Path()
 8        path.move(to: CGPoint(x: 0.0,
 9                              y: (rect.height - (yValues[0] * factor))))
10        for i in 1..<yValues.count {
11            let pt = CGPoint(x: (Double(i) * Double(xIncrement)),
12                             y: (rect.height - (yValues[i] * factor)))
13            path.addLine(to: pt)
14        }
15        return path
16    }
17}

The sample line charts are updated to ranges of values other than 0 to 1.

 1struct ContentView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                Text("Line Chart")
 9                
10                LineChartView(
11                    title: "the chart title",
12                    data: [164, 182, 212, 198, 242, 30, 158, 6, 67, 195, 104, 125, 125, 92, 81, 188, 50, 155, 225, 243, 53, 141, 32, 1])
13                    .frame(width: 300, height: 300, alignment: .center)
14                
15                Spacer().frame(height:50)
16                
17                HStack {
18                    LineChartView(
19                        title: "One",
20                        data: [0.88, 0.76, 0.92, 0.18, 0.7, 0.51, 0.66, 0.35, 0.53])
21                        .frame(width: 100, height: 100, alignment: .center)
22                    
23                    Spacer().frame(width:50)
24
25                    LineChartView(
26                        title: "Two",
27                        data: [6, 30, 195, 164, 182, 198, 212, 400])
28                        .frame(width: 150, height: 100, alignment: .center)
29                }
30                
31                Spacer()
32            }
33        }
34    }
35}

Line charts with y-values ranges greater than 1

Line charts with y-values ranges greater than 1

Add the x-axis and y-axis

A lot of the work done on the axes for a bar chart in Add Axes to a Bar Chart in SwiftUI can be reused. The LineChartData is structured to contain a list of values for each x-value, this could possibly be restructured in a number of ways. However, it is easy to transform the data into a sequence of values for each line using the Swift map function. The YaxisView, XaxisView and KeyView are all used with minor modifications.

 1struct DataItem: Identifiable {
 2    let name: String
 3    let values: [Double]
 4    let id = UUID()
 5}
 6
 7struct LineChartData {
 8    let keys: [String]
 9    let data: [DataItem]
10}

 1struct YaxisView: View {
 2    var ticks: [Int]
 3    var scaleFactor: Double
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let fullChartHeight = gr.size.height
 8            ZStack {
 9                // y-axis line
10                Rectangle()
11                    .fill(Color.black)
12                    .frame(width:1.5)
13                    .offset(x: (gr.size.width/2.0)-1, y: 1)
14                
15                // Tick marks
16                ForEach(ticks, id:\.self) { t in
17                    HStack {
18                        Spacer()
19                        Text("\(t)")
20                            .font(.footnote)
21                        Rectangle()
22                            .frame(width: 10, height: 1)
23                    }
24                    .offset(y: (fullChartHeight/2.0) - (CGFloat(t) * CGFloat(scaleFactor)))
25                }
26            }
27        }
28    }
29}

 1struct XaxisView: View {
 2    var data: [DataItem]
 3    
 4    var body: some View {
 5        GeometryReader { gr in
 6            let labelWidth = (gr.size.width * 0.9) / CGFloat(data.count)
 7            let padWidth = (gr.size.width * 0.05) / CGFloat(data.count)
 8            ZStack {
 9                Rectangle()
10                    .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
11                
12                Rectangle()
13                    .fill(Color.black)
14                    .frame(height: 1.5)
15                    .offset(x: 0, y: -(gr.size.height/2.0))
16                
17                HStack(spacing:0) {
18                    ForEach(data) { item in
19                        Text(item.name)
20                            .font(.footnote)
21                            .frame(width:labelWidth, height: gr.size.height)
22                    }
23                    .padding(.horizontal, padWidth)
24                }
25            }
26        }
27    }
28}

 1struct KeyView: View {
 2    let keys: [String]
 3    
 4    var body: some View {
 5        HStack {
 6            ForEach(keys.indices) { i in
 7                HStack(spacing:0) {
 8                    Image(systemName: "square.fill")
 9                        .foregroundColor(colors[i])
10                    Text("\(keys[i])")
11                }
12                .font(.footnote)
13            }
14        }
15    }
16}

The LineChartView is modified to use LineChartData and to set the layout for the chart with axes and key. The data from LineChartData is passed into ChartAreaView.

 1struct LineChartView: View {
 2    var title: String
 3    var chartData: LineChartData
 4    
 5    let isShowingKey = true
 6    
 7    var body: some View {
 8        let data = chartData.data
 9        GeometryReader { gr in
10            let headHeight = gr.size.height * 0.10
11            let maxValue = data.flatMap { $0.values }.max()!
12            let axisWidth = gr.size.width * 0.15
13            let axisHeight = gr.size.height * 0.1
14            let keyHeight = gr.size.height * (isShowingKey ? 0.1 : 0.0)
15            let fullChartHeight = gr.size.height - axisHeight - headHeight - keyHeight
16            
17            let tickMarks = AxisParameters.getTicks(top: Int(maxValue))
18            let scaleFactor = (fullChartHeight * 0.95) / CGFloat(tickMarks[tickMarks.count-1])
19            
20            VStack {
21                ChartHeaderView(title: title)
22                    .frame(height: headHeight)
23                
24                ZStack {
25                    Rectangle()
26                        .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
27                    
28                    VStack(spacing:0) {
29                        if isShowingKey {
30                            KeyView(keys: chartData.keys)
31                                .frame(height: keyHeight)
32                        }
33                        
34                        HStack(spacing:0) {
35                            YaxisView(ticks: tickMarks, scaleFactor: Double(scaleFactor))
36                                .frame(width:axisWidth, height: fullChartHeight)
37                            ChartAreaView(data: data, scaleFactor: Double(scaleFactor))
38                                .frame(height: fullChartHeight)
39                        }
40                        
41                        HStack(spacing:0) {
42                            Rectangle()
43                                .fill(Color.clear)
44                                .frame(width:axisWidth, height:axisHeight)
45                            XaxisView(data: data)
46                                .frame(height:axisHeight)
47                        }
48                    }
49                }
50            }
51        }
52    }
53}

The ChartAreaView is updated to take a list of DataItems and transforms the data into an array for each line, which is passed to the LineShape to draw.

 1struct ChartAreaView: View {
 2    var data: [DataItem]
 3    var scaleFactor: Double
 4    
 5    var body: some View {
 6        ZStack {
 7            RoundedRectangle(cornerRadius: 5.0)
 8                .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
 9            
10            ForEach(data[0].values.indices) { i in
11                let list = data.map { $0.values[i] }
12                LineShape(yValues: list, scaleFactor: scaleFactor)
13                    .stroke(colors[i], lineWidth: 2.0)
14            }
15        }
16    }
17}

 1struct ContentView: View {
 2
 3    let stepData = LineChartData(
 4        keys: ["Current Week", "Previous Week"],
 5        data: [
 6            DataItem(name: "Mon", values: [4.2, 15.8]),
 7            DataItem(name: "Tue", values: [15.8, 7.3]),
 8            DataItem(name: "Wed", values: [2.8, 8.2]),
 9            DataItem(name: "Thu", values: [10.8, 25.6]),
10            DataItem(name: "Fri", values: [5.3, 16.1]),
11            DataItem(name: "Sat", values: [10.4, 16.5]),
12            DataItem(name: "Sun", values: [4.0, 3.2])
13        ])    
14    
15    var body: some View {
16        ZStack {
17            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
18                .edgesIgnoringSafeArea(.all)
19            
20            VStack {
21                LineChartView(
22                    title: "Daily step count (1000)",
23                    chartData: stepData)
24                    .frame(width: 300, height: 500, alignment: .center)
25                                
26                Spacer()
27            }
28        }
29    }
30}

Line chart containing two lines and displaying x and y axes

Line chart containing two lines and displaying x and y axes

Align the x-axis

In the chart above, the points on the chart do not align with the labels on the x-axis. The labels are spaced evenly below the axis, but the points for the line begin on the y-axis and end on the edge of the chart. Tick marks on the x-axis do not add any value in the bar chart, but would be valuable on a line chart.

Tick marks are added to the XaxisView using Rectangles above the test labels.

 1struct XaxisView: View {
 2    var data: [DataItem]
 3    
 4    var body: some View {
 5        GeometryReader { gr in
 6            let labelWidth = (gr.size.width * 0.9) / CGFloat(data.count)
 7            let padWidth = (gr.size.width * 0.05) / CGFloat(data.count)
 8            let labelHeight = gr.size.height
 9            let tickHeight = gr.size.height * 0.12
10            ZStack {
11                Rectangle()
12                    .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
13                
14                Rectangle()
15                    .fill(Color.black)
16                    .frame(height: 1.5)
17                    .offset(x: 0, y: -(gr.size.height/2.0))
18                
19                HStack(spacing:0) {
20                    ForEach(data) { item in
21                        ZStack {
22                            VStack {
23                                Rectangle()
24                                    .frame(width: 1, height: tickHeight)
25                                Spacer()
26                            }
27                            Text(item.name)
28                                .font(.footnote)
29                            .frame(width:labelWidth, height: labelHeight)
30                        }
31                    }
32                    .padding(.horizontal, padWidth)
33                }
34            }
35        }
36    }
37}

The horizontal spacing for the x points is updated in the LineShape. The points are spread evenly across the x-axis by creating an increment value and setting the first point to be mid-way along this increment. The points on the chart now lign up with the tick marks on the x-axis.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3    var scaleFactor: Double
 4    
 5    func path(in rect: CGRect) -> Path {
 6        let xIncrement = (rect.width / (CGFloat(yValues.count)))
 7        var xValue = xIncrement * 0.5
 8        var path = Path()
 9        path.move(to: CGPoint(x: xValue,
10                              y: (rect.height - (yValues[0] * scaleFactor))))
11        for i in 1..<yValues.count {
12            xValue += xIncrement
13            let pt = CGPoint(x: xValue,
14                             y: (rect.height - (yValues[i] * scaleFactor)))
15            path.addLine(to: pt)
16        }
17        return path
18    }
19}

Line chart with points correctly aligned with x-axis

Line chart with points correctly aligned with x-axis

Display real data in the Line Chart

Here is the comparison of population changes in two countries shown in tabular format and using the Line Chart.

Population changes in Ireland and The Gambia

Year	Ireland	The Gambia
2000	3.79	1.32
2001	3.85	1.36
2002	3.93	1.40
2003	3.98	1.45
2004	4.05	1.50
2005	4.13	1.54
2006	4.23	1.59
2007	4.38	1.64
2008	4.49	1.69
2009	4.53	1.74
2010	4.55	1.79
2011	4.57	1.85
2012	4.59	1.91
2013	4.61	1.96
2014	4.65	2.02
2015	4.69	2.09
2016	4.74	2.15
2017	4.79	2.21
2018	4.86	2.28
2019	4.92	2.35
2020	4.98	2.42
2021	5.01	2.51

 1struct ContentView: View {
 2    let popData = LineChartData(
 3        keys: ["Ireland", "The Gambia"],
 4        data: [
 5            DataItem(name: "2000", values: [3.79, 1.32]),
 6            DataItem(name: "2001", values: [3.85, 1.36]),
 7            DataItem(name: "2002", values: [3.93, 1.40]),
 8            DataItem(name: "2003", values: [3.98, 1.45]),
 9            DataItem(name: "2004", values: [4.05, 1.50]),
10            DataItem(name: "2005", values: [4.13, 1.54]),
11            DataItem(name: "2006", values: [4.23, 1.59]),
12            DataItem(name: "2007", values: [4.38, 1.64]),
13            DataItem(name: "2008", values: [4.49, 1.69]),
14            DataItem(name: "2009", values: [4.53, 1.74]),
15            DataItem(name: "2010", values: [4.55, 1.79]),
16            DataItem(name: "2011", values: [4.57, 1.85]),
17            DataItem(name: "2012", values: [4.59, 1.91]),
18            DataItem(name: "2013", values: [4.61, 1.96]),
19            DataItem(name: "2014", values: [4.65, 2.02]),
20            DataItem(name: "2015", values: [4.69, 2.09]),
21            DataItem(name: "2016", values: [4.74, 2.15]),
22            DataItem(name: "2017", values: [4.79, 2.21]),
23            DataItem(name: "2018", values: [4.86, 2.28]),
24            DataItem(name: "2019", values: [4.92, 2.35]),
25            DataItem(name: "2020", values: [4.98, 2.42]),
26            DataItem(name: "2021", values: [5.01, 2.51])
27        ])
28    
29    var body: some View {
30        ZStack {
31            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
32                .edgesIgnoringSafeArea(.all)
33            
34            VStack {
35                LineChartView(
36                    title: "Population Data (million)",
37                    chartData: popData)
38                    .frame(width: 1000, height: 500, alignment: .center)
39                                
40                Spacer()
41            }
42        }
43    }
44}

Line chart comparing polulation growth in the last 20 years between Ireland and The Gambia

Line chart comparing polulation growth in the last 20 years between Ireland and The Gambia

Conclusion

A line chart can be created using the SwiftUI Path structure in a 2D shape to draw a line between consecutive points. It is relatively easy to get started with a basic chart, but there is more work to customise the layout as well as add labels and annotate the chart. The code in this article leveraged code developed for the bar chart. There is still room to improve the line chart such as adding labels on the axes or the ability to rotate the x-axis labels.

Create a blob shape in SwiftUI

Eric Callanan — Sunday, 16 May 2021

Is it possible to create any shape using the Path in SwiftUI? I slipped down a bit of a rabbit hole when creating shapes for card suits in SwiftUI. In this article I will explore how to create a random blob shape in SwiftUI.

I still think the answer is yes, any shape can be created in SwiftUI using Path. It may not be the best use of one's time to recreate the Mona Lisa by plotting every coordinate, but it is interesting to explore some basic shapes.

Simple shape

Start with a simple shape such as the heart shape from the card suits explored in Create patterns from basic shapes in SwiftUI. This uses Path to join a number of points using the Path.addCurve method to add cubic Bézier curves to the path to create the shape. The color of the shape can be set using the fill modifier or the outline set using stroke modifier.

 1struct HeartShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let size = min(rect.width, rect.height)
 4        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 5        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 6
 7        func offsetPoint(p: CGPoint) -> CGPoint {
 8            return CGPoint(x: p.x + xOffset, y: p.y+yOffset)
 9        }
10        var path = Path()
11
12        path.move(to: offsetPoint(p: (CGPoint(x: (size * 0.50), y: (size * 0.25)))))
13        path.addCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.25))),
14                      control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))),
15                      control2: offsetPoint(p: CGPoint(x: 0, y: 0)))
16        path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: size)),
17                      control1: offsetPoint(p: CGPoint(x: 0, y: (size * 0.60))),
18                      control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))))
19        path.addCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.25))),
20                      control1: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.80))),
21                      control2: offsetPoint(p: CGPoint(x: size, y: (size * 0.60))))
22        path.addCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: (size * 0.25))),
23                      control1: offsetPoint(p: CGPoint(x: size, y: 0)),
24                      control2: offsetPoint(p: CGPoint(x: (size * 0.50), y: (-size * 0.10))))
25        return path
26    }
27}

Heart shape created using coordinates joined with cubic Bézier curves

Heart shape created using coordinates joined with cubic Bézier curves

Random shape

The first attempt at a random shape is to simply generate a set of random points and join them to generate a shape. This does not generate a coherent shape, although it can generate some interesting patterns. The reason a shape is not produced is because this is just creating a random set of points within the defined frame and then joining the points together. A solid 2D shape can only be created if the lines in the path do not cross each other and the points are connected in some kind of sequence.

 1struct RandomStraightShape: Shape {
 2    var NumberOfPoints:Int
 3
 4    func path(in rect: CGRect) -> Path {
 5        let size = min(rect.width, rect.height)
 6        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 7        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 8
 9        func offsetPoint(p: CGPoint) -> CGPoint {
10            return CGPoint(x: p.x + xOffset, y: p.y + yOffset)
11        }
12
13        var path = Path()
14
15        let x1 = Double.random(in: 1.0...Double(size))
16        let y1 = Double.random(in: 1.0...Double(size))
17        path.move(to: offsetPoint(p: (CGPoint(x: x1, y: y1))))
18
19        for _ in 0...NumberOfPoints {
20            let x = Double.random(in: 0.0...Double(size))
21            let y = Double.random(in: 0.0...Double(size))
22            path.addLine(to: offsetPoint(p: (CGPoint(x: x, y: y))))
23        }
24        path.closeSubpath()
25
26        return path
27    }
28}

Shapes created by joining random points

Shapes created by joining random points

Regular Polygon

I looked at regular polygons in Animating a shape change in SwiftUI. The following is an example of creating regular polygons. The creation of the shape starts with polar coordinates, where the first point is at an angle of zero and each subsequent point is got be adding to the angle until a complete circle is reached. the angle to use for each polygon depends on the number of sides and is calculated by dividing 360 degrees by the number of sides.

 1struct RegularPolygonShape: Shape {
 2    var sides:Int
 3
 4    func path(in rect: CGRect) -> Path {
 5        let c = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 6        let r = Double(min(rect.width,rect.height)) / 2.0
 7        var vertices:[CGPoint] = []
 8        for i in 0...sides {
 9            let angle = (2.0 * Double.pi * Double(i)/Double(sides))
10            let pt = Cartesian(length: r, angle: angle)
11            // Move the point relative to the center of the rect and add to vertices
12            vertices.append(CGPoint(x: pt.x + c.x, y: pt.y + c.y))
13        }
14        var path = Path()
15        for (n, pt) in vertices.enumerated() {
16            print("\(n)   vertices.append(CGPoint(x: \(pt.x), y:\(pt.y)))")
17            n == 0 ? path.move(to: pt) : path.addLine(to: pt)
18        }
19        path.closeSubpath()
20        return path
21    }
22}

1func Cartesian(length:Double, angle:Double) -> CGPoint {
2    return CGPoint(x: length * cos(angle), y: length * sin(angle))
3}

Regular polygon shapes centered in containing view

Regular polygon shapes centered in containing view

Irregular Polygon

Using the code for the creation of regular polygons as a starting point, we can generate irregular polygons if we randomly change the distance the points are from the center. This does create solid shapes as shown below. The points are ordered around a central point with the distance from the center changing, but the angles remain constant. The points are still connected using straight lines, which gives the shapes a jagged fell to them. The code to create the vertices is split out from the code to create the shape from the vertices.

 1fileprivate func CreateRandomPolygon(sides:Int,
 2                                     radius r: Double,
 3                                     center c: CGPoint) -> [CGPoint] {
 4    var vertices:[CGPoint] = []
 5    for i in 0..<sides {
 6        let angle = (2.0 * Double.pi * Double(i)/Double(sides))
 7        let radius = Double.random(in: r/3.0...r)
 8        let pt = Cartesian(length: radius, angle: angle)
 9        // Move the point relative to the center of the rect and add to vertices
10        vertices.append(CGPoint(x: pt.x + c.x, y: pt.y + c.y))
11    }
12    vertices.append(vertices[0])
13    return vertices
14}

 1struct RandomPolygonShape: Shape {
 2    var sides:Int
 3
 4    func path(in rect: CGRect) -> Path {
 5        let c = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 6        let r = Double(min(rect.width,rect.height)) / 2.0
 7        let vertices = CreateRandomPolygon(
 8            sides: sides,
 9            radius: r,
10            center: c)
11        var path = Path()
12        for (n, pt) in vertices.enumerated() {
13            n == 0 ? path.move(to: pt) : path.addLine(to: pt)
14        }
15        path.closeSubpath()
16        return path
17    }
18}

Irregular polygons shapes centered in containing view

Irregular polygons shapes centered in containing view

Curved lines - Quadratic Curves

Building on the irregular polygons, curved lines are used to connect the points. The addQuadCurve method is used that creates a path from current point to a destination point using a third point as a control point. A segment struct consisting of a point and a control point is defined to hold the data for the segments in the shape.

1struct Segment {
2    let point: CGPoint
3    let control: CGPoint
4}

Polar coordinates are once again used to create the segments for the shape. The distance from the center is varied for each segment using Random method. The control point for each segment is set at a varied angle around the mid-angle between the points. The distance for the control points are also varied for every other segment to pull the curve in to the center or out to the circumference.

These shapes are looking better, but the shapes with odd number of points still have a sharp corner.

 1fileprivate func CreateRandomShape(sides:Int, radius r: Double, center c: CGPoint) -> [Segment] {
 2    var segments:[Segment] = []
 3
 4    let segmentAngle = 2.0 * Double.pi / Double(sides)
 5    for i in 0..<sides {
 6        let angle = segmentAngle * Double(i)
 7        let radius = r * Double.random(in: 0.7...1.0)
 8        let pt = Cartesian(length: radius, angle: angle)
 9
10        let ctlAngle = angle - (segmentAngle * Double.random(in: 0.3...0.8))
11        let distance = i%2==0 ? radius*0.3 : radius*1.2
12        let ctl = Cartesian(length: distance, angle: ctlAngle)
13        let s:Segment = Segment(point: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
14                                control: CGPoint(x: ctl.x + c.x, y: ctl.y + c.y))
15        segments.append(s)
16    }
17    segments.append(segments[0])
18    return segments
19}

 1struct RandomShape: Shape {
 2    var sides:Int
 3
 4    func path(in rect: CGRect) -> Path {
 5        let c = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 6        let r = Double(min(rect.width,rect.height)) / 2.0
 7        let segments = CreateRandomShape(
 8            sides: sides,
 9            radius: r,
10            center: c)
11
12        var path = Path()
13        for (n, seg) in segments.enumerated() {
14            n == 0 ? path.move(to: seg.point) : path.addQuadCurve(to: seg.point, control: seg.control)
15        }
16        path.closeSubpath()
17        return path
18    }
19}

Irregular shape joining points with quadratic curves

Irregular shape joining points with quadratic curves

Curved lines - Cubic Curves

The use of Quadratic curves to join the points has improved the shapes created, but there are still some sharp corners and some curves seem too circular. Path also has a addCurve method that adds a cubic Bézier curve, which takes the destination point and two control points. A CubicSegment struct is defined to contain the required parameters for the cubic Bézier.

1struct CubicSegment {
2    let point: CGPoint
3    let control1: CGPoint
4    let control2: CGPoint
5}

The shape is once again created using polar coordinates around the central point of the containing View. The distance from the center is alternated from a point near the middle of the radius to a point near the circumference. The control points for each segment are also alternated so that one control point is outside the path and the second one is inside the path. This improves the shapes, but there still seems to be a regular pattern and there are some sharp corners.

 1fileprivate func CreateRandomShape2(sides:Int, radius r: Double, center c: CGPoint) -> [CubicSegment] {
 2    var segments:[CubicSegment] = []
 3
 4    let segmentAngle = 2.0 * Double.pi / Double(sides)
 5    for i in 0..<sides {
 6        let angle = segmentAngle * Double(i)
 7        let radius = i%2==0 ? r * Double.random(in: 0.45...0.55) : r * Double.random(in: 0.75...0.8)
 8        let pt = Cartesian(length: radius, angle: angle)
 9
10        let ctlAngle = angle - (segmentAngle * Double.random(in: 0.75...0.85))
11        let distance = radius * Double.random(in: 0.5...1.2)
12        let ctl = Cartesian(length: distance, angle: ctlAngle)
13
14        let ctlAngle2 = angle - (segmentAngle * Double.random(in: 0.15...0.35))
15        let distance2 = radius * Double.random(in: 0.5...1.2)
16        let ctl2 = Cartesian(length: distance2, angle: ctlAngle2)
17
18        let s:CubicSegment = CubicSegment(point: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
19                                          control1: CGPoint(x: ctl.x + c.x, y: ctl.y + c.y),
20                                          control2: CGPoint(x: ctl2.x + c.x, y: ctl2.y + c.y))
21        segments.append(s)
22    }
23    segments.append(segments[0])
24    return segments
25}

 1struct RandomShape2: Shape {
 2    var sides:Int
 3
 4    func path(in rect: CGRect) -> Path {
 5        let c = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 6        let r = Double(min(rect.width,rect.height)) / 2.0
 7        let segments = CreateRandomShape2(
 8            sides: sides,
 9            radius: r,
10            center: c)
11        var path = Path()
12        path.move(to: segments[0].point)
13        for i in 1..<segments.count {
14            path.addCurve(to: segments[i].point,
15                          control1: segments[i].control1,
16                          control2: segments[i].control2)
17        }
18        path.closeSubpath()
19        return path
20    }
21}

Irregular shape joining points with cubic curves

Irregular shape joining points with cubic curves

Curved lines - Cubic Curves

The final step is to build on the previous code using polar coordinates. The distance for the main points is no longer alternating, but a random distance between 0.45 and 0.85 times the radius. In order to smooth the transition from one segment to the next, the direction of the previous segment is captured and the first control point in the next segment is set to the opposite direction. This results in a smoother curve between segments.

 1fileprivate func CreateRandomShape3(sides:Int, radius r: Double, center c: CGPoint) -> [CubicSegment] {
 2    var segments:[CubicSegment] = []
 3
 4    let sectorAngle = 2.0 * Double.pi / Double(sides)
 5    var previousSectorIn = true
 6    for i in 0..<sides {
 7        let segmentAngle = sectorAngle * Double.random(in: 0.7...1.3)
 8        let angle = (sectorAngle * Double(i-0)) + segmentAngle
 9        let radius = r * Double.random(in: 0.45...0.85)
10        let pt = Cartesian(length: radius, angle: angle)
11
12        let ctlAngle1 = angle - (segmentAngle * 0.75)
13        let ctlDistance1 = previousSectorIn ? radius*1.45 : radius*0.55
14        let ctl1 = Cartesian(length: ctlDistance1, angle: ctlAngle1)
15
16        let ctlAngle2 = angle - (segmentAngle * 0.25)
17        let ctlDistance2 = radius * Double.random(in: 0.55...1.45)
18        previousSectorIn = ctlDistance2 < radius
19        let ctl2 = Cartesian(length: ctlDistance2, angle: ctlAngle2)
20
21        let s:CubicSegment = CubicSegment(point: CGPoint(x: pt.x + c.x, y: pt.y + c.y),
22                                          control1: CGPoint(x: ctl1.x + c.x, y: ctl1.y + c.y),
23                                          control2: CGPoint(x: ctl2.x + c.x, y: ctl2.y + c.y))
24        segments.append(s)
25    }
26    segments.append(segments[0])
27    return segments
28}

 1struct RandomShape3: Shape {
 2    var sides:Int
 3
 4    func path(in rect: CGRect) -> Path {
 5        let c = CGPoint(x: rect.width/2.0, y: rect.height/2.0)
 6        let r = Double(min(rect.width,rect.height)) / 2.0
 7        let segments = CreateRandomShape3(
 8            sides: sides,
 9            radius: r,
10            center: c)
11        var path = Path()
12        path.move(to: segments[0].point)
13        for i in 1..<segments.count {
14            path.addCurve(to: segments[i].point,
15                          control1: segments[i].control1,
16                          control2: segments[i].control2)
17        }
18        path.closeSubpath()
19        return path
20    }
21}

Irregular shape with cubic curves where first segment control point is opposite to last one

Irregular shape with cubic curves where first segment control point is opposite to last one

Overview of shapes created in SwiftUI in this article

Overview of shapes created in SwiftUI in this article

Conclusion

I still think it is possible to create any shape in SwiftUI, but some shapes can take longer than others to create. This article showed a couple of ways of defining paths to create blob-like shapes. The final solution relies on using the the polar coordinate system to define a series of points with increasing angles and then joining these points with cubic Bézier curves. The direction of the curves between segments is kept in the same direction by reversing the location of the control points.

The generation of random points and then connecting these points does not result in a solid shape. A variation on this approach could be to divide the view into a grid and set a random point in a series of sections in the grid. These points could be joined to create a continuous shape. However, there would still be challenges with the curves and smooth connections between points.

As a side-note, the shapes with 5 to 15 points look good as blobs, but the shape created with 50 to 100 points look great as an ink splatter or perhaps as some representation of an explosion. This code uses random numbers to generate different shapes every time the views are shown. Once a desired shape is created, the segments could be saved and defined as static resources to use in an App. These shapes can then be used anywhere in an app and scaled and colored as required.

Create patterns from basic shapes in SwiftUI

Eric Callanan — Sunday, 09 May 2021

Many shapes can be created with Path in SwiftUI. Shapes and paths can be combined to create more complex shapes or patterns. This article shows how to create simple shapes and how to create a view of the back of a card with different patterns.

I started looking at animating flipping cards and then got side-tracked on representing the back of a card with some pattern rather than a plain color. I start the shape or layout with fixed sizes and then convert to relative size using GeometryReader. There are many different ways to create the back of cards, such as using a solid color or using an image. There are sf symbols for card suits such as "suit.diamond.fill" that could also be used as images to present a diamond shape, but this article is about creating the shapes from scratch.

Diamond View

Create a diamond using Path to specify drawing curved lines between the four coordinates. GeometryReader is used to get the size of the view it is contained within so that the diamond shape can be created to fit within the available space. The control points for the curves can be adjusted to increase or decrease the curves between the points. The offset variable is used in the following code to quickly see the effect of modifying the control points.

 1struct DiamondView: View {
 2    var body: some View {
 3        GeometryReader { geometry in
 4            Path { path in
 5                let length = min(geometry.size.width, geometry.size.height)
 6                let width = length
 7                let height = length
 8                let middle = length * 0.5
 9                let offset = length * 0.1
10
11                path.move(to: CGPoint(x: 0, y: middle))
12                path.addQuadCurve(to: CGPoint(x: middle, y: 0),
13                                  control: CGPoint(x: middle-offset, y: middle-offset))
14                path.addQuadCurve(to: CGPoint(x: width, y: middle),
15                                  control: CGPoint(x: middle+offset, y: middle-offset))
16                path.addQuadCurve(to: CGPoint(x: middle, y: height),
17                                  control: CGPoint(x: middle+offset, y: middle+offset))
18                path.addQuadCurve(to: CGPoint(x: 0, y: middle),
19                                  control: CGPoint(x: middle-offset, y: middle+offset))
20            }
21            .fill(Color.red)
22        }
23    }
24}

Diamond shape created to fit inside the view using path

Diamond shape created to fit inside the view using path

Suit shapes in 100 by 100 grid

Creating the path directly in a view is good for experimenting, but once we have tha path for the diamond shape we can extract the code into a shape structure. The diamond is probably easiest of the four suit shapes to create. Another approach to drawing a shape from scratch using path is to create a frame of 100 by 100 and create the path within this grid.

  1struct SuitsView: View {
  2    var body: some View {
  3        VStack(spacing:50) {
  4            HStack(spacing:50) {
  5                Path { path in
  6                    path.move(to: CGPoint(x: 0, y: 50))
  7                    path.addQuadCurve(to: CGPoint(x: 50, y: 0),
  8                                      control: CGPoint(x: 40, y: 40))
  9                    path.addQuadCurve(to: CGPoint(x: 100, y: 50),
 10                                      control: CGPoint(x: 60, y: 40))
 11                    path.addQuadCurve(to: CGPoint(x: 50, y: 100),
 12                                      control: CGPoint(x: 60, y: 60))
 13                    path.addQuadCurve(to: CGPoint(x: 0, y: 50),
 14                                      control: CGPoint(x: 40, y: 60))
 15                    path.closeSubpath()
 16                }
 17                .fill(Color.red)
 18                .frame(width: 100, height: 100)
 19
 20                Path { path in
 21                    path.move(to: CGPoint(x: 50, y: 0))
 22                    path.addQuadCurve(to: CGPoint(x: 10, y: 43),
 23                                      control: CGPoint(x: 40, y: 30))
 24                    path.addArc(center: CGPoint(x: 20, y: 60),
 25                                radius: 20.0,
 26                                startAngle: Angle(degrees: -100),
 27                                endAngle: Angle(degrees: 50),
 28                                clockwise: true)
 29                    path.addLine(to: CGPoint(x: 40, y: 65))
 30                    path.addQuadCurve(to: CGPoint(x: 30, y: 90),
 31                                      control: CGPoint(x: 45, y: 80))
 32                    path.addQuadCurve(to: CGPoint(x: 30, y: 100),
 33                                      control: CGPoint(x: 20, y: 98))
 34                    path.addLine(to: CGPoint(x: 70, y: 100))
 35                    path.addQuadCurve(to: CGPoint(x: 70, y: 90),
 36                                      control: CGPoint(x: 80, y: 98))
 37                    path.addQuadCurve(to: CGPoint(x: 60, y: 65),
 38                                      control: CGPoint(x: 55, y: 80))
 39                    path.addArc(center: CGPoint(x: 80, y: 60),
 40                                radius: 20.0,
 41                                startAngle: Angle(degrees: 140),
 42                                endAngle: Angle(degrees: -70),
 43                                clockwise: true)
 44                    path.addQuadCurve(to: CGPoint(x: 50, y: 0),
 45                                      control: CGPoint(x: 60, y: 30))
 46                    path.addLine(to: CGPoint(x: 50, y: 0))
 47                    path.closeSubpath()
 48                }
 49                .fill(Color.black)
 50                .frame(width: 100, height: 100)
 51            }
 52
 53            HStack(spacing:50) {
 54                Path { path in
 55                    path.move(to: CGPoint(x: 70, y: 30))
 56                    path.addCurve(to: CGPoint(x: 30, y: 30),
 57                                  control1: CGPoint(x: 100, y: -10),
 58                                  control2: CGPoint(x: 0, y: -10))
 59                    path.addLine(to: CGPoint(x: 45, y: 45))
 60                    path.addCurve(to: CGPoint(x: 45, y: 70),
 61                                  control1: CGPoint(x: -15, y: 0),
 62                                  control2: CGPoint(x: -15, y: 120))
 63
 64                    path.addLine(to: CGPoint(x: 45, y: 70))
 65                    path.addLine(to: CGPoint(x: 30, y: 100))
 66                    path.addLine(to: CGPoint(x: 70, y: 100))
 67                    path.addLine(to: CGPoint(x: 55, y: 70))
 68                    path.addLine(to: CGPoint(x: 55, y: 70))
 69
 70                    path.addCurve(to: CGPoint(x: 55, y: 45),
 71                                  control1: CGPoint(x: 115, y: 120),
 72                                  control2: CGPoint(x: 115, y: 0))
 73
 74                    path.addLine(to: CGPoint(x: 70, y: 30))
 75                    path.closeSubpath()
 76                }
 77                .fill(Color.black)
 78                .frame(width: 100, height: 100)
 79
 80                Path { path in
 81                    path.move(to: CGPoint(x: 50, y: 25))
 82                    path.addCurve(to: CGPoint(x: 0, y: 25),
 83                                  control1: CGPoint(x: 50, y: -10),
 84                                  control2: CGPoint(x: 0, y: 0))
 85                    path.addCurve(to: CGPoint(x: 50, y: 100),
 86                                  control1: CGPoint(x: 0, y: 60),
 87                                  control2: CGPoint(x: 50, y: 80))
 88                    path.addCurve(to: CGPoint(x: 100, y: 25),
 89                                  control1: CGPoint(x: 50, y: 80),
 90                                  control2: CGPoint(x: 100, y: 60))
 91                    path.addCurve(to: CGPoint(x: 50, y: 25),
 92                                  control1: CGPoint(x: 100, y: 0),
 93                                  control2: CGPoint(x: 50, y: -10))
 94                }
 95                .fill(Color.red)
 96                .frame(width: 100, height: 100)
 97            }
 98
 99            Spacer()
100        }
101    }
102}

Suit shapes in 100 by 100 grid

Suit shapes in 100 by 100 grid

Diamond Shape

The shape is extracted into a shape struct once we have defined the shape in the 100 x 100 grid. The Shape protocol has one required function to define the Path to draw within the given CGRect. Defining a structure that implements the Shape protocol allows us to dispense with the use of GeometryReader as the Shape is passed in the rectangle size of the view that contains it. A size parameter is set to the minimum of the height and width so the shape will fit into the view. The specific points for the view size are adjusted from the 100 x 100 template to the passed in CGRect. There is also either a horizontal or vertical adjustment if the view is not a square so the shape is displayed in the center of the view.

 1struct DiamondShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let size = min(rect.width, rect.height)
 4        let xOffset = (rect.width > rect.height) ? (rect.width - rect.height) / 2.0 : 0.0
 5        let yOffset = (rect.height > rect.width) ? (rect.height - rect.width) / 2.0 : 0.0
 6
 7        func offsetPoint(p: CGPoint) -> CGPoint {
 8            return CGPoint(x: p.x + xOffset, y: p.y+yOffset)
 9        }
10
11        let path = Path { path in
12            path.move(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.50))))
13            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: 0)),
14                              control: offsetPoint(p: CGPoint(x: (size * 0.40), y: (size * 0.40))))
15            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: size, y: (size * 0.50))),
16                              control: offsetPoint(p: CGPoint(x: (size * 0.60), y: (size * 0.40))))
17            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: (size * 0.50), y: size)),
18                              control: offsetPoint(p: CGPoint(x: (size * 0.60), y: (size * 0.60))))
19            path.addQuadCurve(to: offsetPoint(p: CGPoint(x: 0, y: (size * 0.50))),
20                              control: offsetPoint(p: CGPoint(x: (size * 0.40), y: (size * 0.60))))
21            path.closeSubpath()
22        }
23        return path
24    }
25}

A sample of diamonds are displayed in a vertical stack to ensure the shape is displaying correctly. The background color is set to gray so the placement of the diamond in the frame can be easily seen.

 1struct DiamondShapeView: View {
 2    var body: some View {
 3        VStack {
 4            DiamondShape()
 5                .fill(Color.purple)
 6                .frame(width: 50, height: 80)
 7                .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.2020861898)))
 8
 9            DiamondShape()
10                .fill(Color.green)
11                .frame(width: 100, height: 100)
12                .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.2020861898)))
13
14            DiamondShape()
15                .fill(Color.blue)
16                .frame(width: 300, height: 200, alignment: .center)
17                .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.2020861898)))
18
19            DiamondShape()
20                .fill(Color.red)
21                .frame(width: 300, height: 300)
22                .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.2020861898)))
23        }
24    }
25}

Diamond shapes centered in available space

Diamond shapes centered in available space

Repeating rows and columns

Different patterns can be created using the shape, once the shape has been defined. once again, GeometryReader is used to layout the view by calculating each diamond width and height based on the available space in the view.

 1struct CardView1: View {
 2    let rows = 10
 3    let cols = 8
 4
 5    var body: some View {
 6        VStack {
 7            GeometryReader { gr in
 8                let width = gr.size.width / CGFloat(cols)
 9                let height = gr.size.height / CGFloat(rows)
10
11                VStack(spacing:0) {
12                    ForEach(0..<rows) { _ in
13                        HStack(spacing:0) {
14                            Group {
15                                ForEach(0..<cols) { _ in
16                                    DiamondShape()
17                                        .fill(Color.red)
18                                        .frame(width: width, height: height)
19                                }
20                            }
21                        }
22                    }
23                }
24            }
25            .frame(width: 300, height: 500)
26            .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)))
27        }
28    }
29}

Repeating the shape in rows and columns to create a pattern

Repeating the shape in rows and columns to create a pattern

Patterns based on rows and columns

Different patterns can be created by varying the numer of diamond shapes in rows and columns. The card view is extracted into a separate struct with parameters for the number of rows and columns. Another addition is the offset of alternating rows, which are set to contain one less diamond shape.

 1struct DiamondCardView: View {
 2    var rows :Int
 3    var cols: Int
 4
 5    var body: some View {
 6        GeometryReader { gr in
 7            let width = gr.size.width / CGFloat(cols)
 8            let height = gr.size.height / CGFloat(rows)
 9
10            VStack(spacing:0) {
11                ForEach(0..<rows) { i in
12                    let rowCols = (i%2==0) ? cols : cols - 1
13                    HStack(spacing:0) {
14                        Group {
15                            ForEach(0..<rowCols) { _ in
16                                DiamondShape()
17                                    .fill(Color.red)
18                                    .frame(width: width, height: height)
19                            }
20                        }
21                    }
22                }
23            }
24        }
25    }
26}

 1struct CardView2: View {
 2    var body: some View {
 3        VStack {
 4            HStack {
 5                DiamondCardView(rows: 9, cols: 7)
 6                    .frame(width: 150, height: 250)
 7                    .background(Color(#colorLiteral(red: 0.1215686277, green: 0.01176470611, blue: 0.4235294163, alpha: 1)))
 8                DiamondCardView(rows: 21, cols: 10)
 9                    .frame(width: 150, height: 250)
10                    .background(Color(#colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)))
11            }
12            HStack {
13                DiamondCardView(rows: 3, cols: 3)
14                    .frame(width: 150, height: 250)
15                    .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)))
16                DiamondCardView(rows: 1, cols: 1)
17                    .frame(width: 150, height: 250)
18                    .background(Color(#colorLiteral(red: 0.9764705896, green: 0.850980401, blue: 0.5490196347, alpha: 1)))
19            }
20        }
21    }
22}

Change card patterns by changine rows, columns and colors

Change card patterns by changine rows, columns and colors

Card back

The back of playing cards frequently contain some kind of border around the central pattern. The following code uses the Overlay modifier to add three borders to create a card as well as using rounded corners on the card.

 1struct CardView3: View {
 2    var body: some View {
 3        DiamondCardView(rows: 21, cols: 7)
 4            .padding(40)
 5            .frame(width: 300, height: 500)
 6            .background(Color(#colorLiteral(red: 0.06274510175, green: 0, blue: 0.1921568662, alpha: 1)))
 7            .cornerRadius(30)
 8            .overlay(RoundedRectangle(cornerRadius: 40)
 9                        .stroke(Color(#colorLiteral(red: 0.9301124811, green: 0.940382421, blue: 0.766456604, alpha: 1)), lineWidth: 50)
10                        .cornerRadius(30))
11            .overlay(RoundedRectangle(cornerRadius: 20)
12                        .stroke(Color(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)), lineWidth: 20)
13                        .cornerRadius(15)
14                        .padding(25))
15            .overlay(RoundedRectangle(cornerRadius: 30)
16                        .stroke(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)), lineWidth: 2)
17                        .cornerRadius(30))
18    }
19}

Card back pattern consisting of diamond shapes and borders

Card back pattern consisting of diamond shapes and borders

Conclusion

Any shape can be created with Path in SwiftUI. Path can be defined directly in views and the GeometryReader can be used to determine the available space to calculate shape lengths. When a shape is going to be used multiple times in an App, then a custom shape can be created by defining a struct that implements the Shape protocol. This requires just one function to be defined and that is the path() function, which returns the path for the shape. This article showed how to define shapes for the four card suits, even though these are available in some fonts and in the SF symbols. Once the basic shapes were defined, it is possible to create patterns using these shapes. This has just scratched the surface and there are so much more patterns that could be created with different combinations, rotations and overlays.