shape on Software Development Notes

Saving a SwiftUI view to Photos

Eric Callanan — Sunday, 06 Mar 2022

Many shapes and patterns can be created using Path and Canvas in SwiftUI. It would be great to be able to save these as images in the Photo Library. This is possible using UIKit, by first converting the SwiftUI View to UIImage and then saving this image to Photos.

Access to Photos library

In order to save an image to the Photo Library, the app has to be granted access by the user. It is necessary to set a property NSPhotoLibraryAddUsageDescription in the App Targets info.plist. This is set in Project > Targets > Info and adding a new key "Privacy - Photo Library Additions Usage Description". The text that is entered here is presented to the user when the App first tries to save an image to the Photos Library. This is related to built-in privacy protections, so that any app may only access the user’s Photos library if authorised. more information available at Delivering an Enhanced Privacy Experience in Your Photos App.

If this property is not set, the App will crash when trying to access the Photos Library.

... ViewToPhotos[xxx] [access] This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSPhotoLibraryAddUsageDescription key with a string value explaining to the user how the app uses this data.

Add access to users Photo Library to App properties

Add access to users Photo Library to App properties

Save an image to Photos

Add an image to the Assets for the App. An instance of UIImage is created in the SwiftUI view and UIImageWriteToSavedPhotosAlbum is used to add the image to the Photo Library on the device. The Alert will show the first time the App tries to add an image to the Photo Library, allowing the user to grant (or not) access to this feature. This sets a setting for the App that can be changed later in Settings App on the device.

 1struct SaveImageView: View {
 2    
 3    let image = UIImage(named: "cake")!
 4    
 5    var body: some View {
 6        VStack {
 7            Text("Sticky Toffee Cake")
 8            
 9            Image(uiImage: image)
10                .resizable()
11                .scaledToFill()
12                .frame(width: 250, height: 220, alignment: .center)
13                .clipped()
14
15            Spacer().frame(height:100)
16            
17            Button {
18                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
19            } label: {
20                HStack {
21                    Image(systemName: "photo.on.rectangle.angled")
22                    Text("Add to Photos")
23                }
24                .font(.title)
25                .foregroundColor(.purple)
26            }
27            Spacer()
28        }
29    }
30}

Alert is shown first time App tries to access Photo Library

Alert is shown first time App tries to access Photo Library

Alert to allow app to access Photo Library

Alert to allow app to access Photo Library

Convert SwiftUI view to Image

UIHostingController is commonly used to host SwiftUI views inside a UIKit view hierarchy. As such, it can be used to convert the SwiftUI view into a UIImage object. We start with a function convertViewToUiImage in the SwiftUI view that takes a specific view as a parameter and creates a UIHostingController with the view as the base. UIGraphicsImageRenderer is used to render a UIImage of the SwiftUI view. Note that this was initially moving the view down and leaving a blank space at the top of the image in the Photo Library, until the SwiftUI view was set to ignore the safe area using edgesIgnoringSafeArea.

 1struct TextView: View {
 2    var body: some View {
 3        Color.green.opacity(0.4)
 4            .cornerRadius(20)
 5            .frame(width: 250, height: 100, alignment: .center)
 6            .overlay(
 7                Text("Text to Image")
 8                    .font(.largeTitle)
 9            )
10            .edgesIgnoringSafeArea(.all)
11    }
12}

 1struct TextCardView: View {
 2    var textView = TextView()
 3    
 4    var body: some View {
 5        VStack {
 6            Text("Text outside of the textView")
 7            
 8            textView
 9            
10            Spacer().frame(height:100)
11            
12            Button {
13                let image = convertViewToUiImage(textView)
14                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
15            } label: {
16                HStack {
17                    Image(systemName: "photo.on.rectangle.angled")
18                    Text("Add to Photos")
19                }
20                .font(.title)
21                .foregroundColor(.purple)
22            }
23            
24            Spacer()
25        }
26    }
27    
28    func convertViewToUiImage(_ myView: TextView) -> UIImage {
29        var uiImage = UIImage(systemName: "exclamationmark.triangle.fill")!
30        let controller = UIHostingController(rootView: myView)
31       
32        if let view = controller.view {
33            let contentSize = view.intrinsicContentSize
34            view.bounds = CGRect(origin: .zero, size: contentSize)
35            view.backgroundColor = .lightGray
36
37            let renderer = UIGraphicsImageRenderer(size: contentSize)
38            uiImage = renderer.image { _ in
39                view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
40            }
41        }
42        return uiImage
43    }
44}

Add a simple SwiftUI view with text to Photo Library

Add a simple SwiftUI view with text to Photo Library

View needs to specify 'edgesIgnoringSafeArea' to avoid offset in saved Photo

View needs to specify 'edgesIgnoringSafeArea' to avoid offset in saved Photo

Add extension to view

It is not great having the function convertViewToUiImage in the middle of the SwiftUI view and it is limited to only working on the textView. It would be better to define this functionality as an extension to the View protocol so that it could be used on any view.

 1extension View {
 2    func asUiImage() -> UIImage {
 3        var uiImage = UIImage(systemName: "exclamationmark.triangle.fill")!
 4        let controller = UIHostingController(rootView: self)
 5       
 6        if let view = controller.view {
 7            let contentSize = view.intrinsicContentSize
 8            view.bounds = CGRect(origin: .zero, size: contentSize)
 9            view.backgroundColor = .clear
10
11            let renderer = UIGraphicsImageRenderer(size: contentSize)
12            uiImage = renderer.image { _ in
13                view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
14            }
15        }
16        return uiImage
17    }
18}

 1struct TextView: View {
 2    var body: some View {
 3        Color.blue.opacity(0.5)
 4            .cornerRadius(20)
 5            .frame(width: 250, height: 100, alignment: .center)
 6            .overlay(
 7                Text("Text View 1")
 8                    .font(.largeTitle)
 9            )
10            .edgesIgnoringSafeArea(.all)
11    }
12}
13
14struct FaceView: View {
15    var body: some View {
16        ZStack {
17            Ellipse()
18                .fill(.blue.opacity(0.9))
19                .frame(width: 200, height: 200, alignment: .center)
20            Ellipse()
21                .fill(.yellow)
22                .frame(width: 40, height: 30, alignment: .center)
23                .offset(x: -30, y: -30)
24            Ellipse()
25                .fill(.yellow)
26                .frame(width: 40, height: 30, alignment: .center)
27                .offset(x: 30, y: -30)
28            Path()
29            Ellipse()
30                .fill(.yellow)
31                .frame(width: 50, height: 20, alignment: .center)
32                .offset(x: 00, y: 50)
33        }
34        .frame(width: 200, height: 200, alignment: .center)
35        .edgesIgnoringSafeArea(.all)
36    }
37}

 1struct UsingExtensionView: View {
 2    var view1 = TextView()
 3    var view2 = FaceView()
 4
 5    var body: some View {
 6        VStack {
 7            Text("Text outside of the textView")
 8            
 9            view1
10            
11            Button {
12                let image = view1.asUiImage()
13                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
14            } label: {
15                HStack {
16                    Image(systemName: "photo.on.rectangle.angled")
17                    Text("Add to Photos")
18                }
19                .font(.title3)
20                .foregroundColor(.purple)
21            }
22
23            view2
24            
25            Button {
26                let image = view2.asUiImage()
27                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
28            } label: {
29                HStack {
30                    Image(systemName: "photo.on.rectangle.angled")
31                    Text("Add to Photos")
32                }
33                .font(.title3)
34                .foregroundColor(.purple)
35            }
36            
37            Spacer()
38        }
39    }
40}

Save SwiftUI views to Photo Library with View extension

Save SwiftUI views to Photo Library with View extension

Save SwiftUI views to Photo Library with View extension

Save SwiftUI views to Photo Library with View extension

Save changes to SwiftUI view to Photos

Let's use the Polygon Model and ViewModel as defined in Persist data with UserDefaults in SwiftUI. A property is added to the Polygon model to return the name of the shape based on the number of sides in the shape. A PolygonView is defined to display the polygon shape based on properties in the model. A SwiftUI view is defined that displays the PolygonView with a slider to change the number of sides and buttons to change the color and the solid or outline shape.

A button is added to save the PolygonView to Photos. The action of this button creates a new instance of PolygonView and converts it to a UIImage using the extension method asUiImage. It is now possible to save a regular polygon shape to photo library, then change the shape and save another image to Photo library.

 1struct PolygonView: View {
 2    @ObservedObject var polygonVm: PolygonViewModel
 3    
 4    var body: some View {
 5        VStack() {
 6            Text(polygonVm.shapeName)
 7                .font(.title)
 8            
 9            ZStack {
10                RegularPolygon(sides: Int(polygonVm.sides))
11                    .stroke(polygonVm.solid ? Color.clear : polygonVm.shapeColor, lineWidth: 6.0)
12                RegularPolygon(sides: Int(polygonVm.sides))
13                    .fill(polygonVm.solid ? polygonVm.shapeColor : Color.clear)
14            }
15            .frame(width: 200, height: 200)
16        }
17        .padding()
18    }
19}

 1struct UsingPolygonView: View {
 2    @ObservedObject var polygonVm: PolygonViewModel
 3    
 4    var body: some View {
 5        VStack(spacing:40) {
 6            PolygonView(polygonVm: polygonVm)
 7            
 8            HStack(spacing:50) {
 9                Spacer()
10                VStack {
11                    Text("Sides \(polygonVm.sides, specifier: "%.0F" )")
12                    Slider(value: $polygonVm.sides.animation(.spring()),
13                           in: 3...20,
14                           minimumValueLabel: Text("3"),
15                           maximumValueLabel: Text("20")) {
16                    }
17                }
18                Spacer()
19            }
20                        
21            HStack(spacing:20) {
22                Spacer()
23
24                Button(polygonVm.solid ? "Outline" : "Solid") {
25                    withAnimation(.easeInOut) {
26                        polygonVm.solid.toggle()
27                    }
28                }
29                .buttonStyle(BlueButtonStyle())
30
31                Button("Increment Color") {
32                    withAnimation(.default) {
33                        polygonVm.nextColor()
34                    }
35                }
36                .buttonStyle(BlueButtonStyle())
37
38                Spacer()
39            }
40            
41            Button {
42                let image = PolygonView(polygonVm: polygonVm)
43                    .edgesIgnoringSafeArea(.all)
44                    .asUiImage()
45                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
46            } label: {
47                HStack {
48                    Image(systemName: "photo.on.rectangle.angled")
49                    Text("Add to Photos")
50                }
51                .font(.title3)
52                .foregroundColor(.purple)
53            }
54            
55            Spacer()
56        }
57    }
58}

Save Polygon shape from SwiftUI view to Photo Library

Save Polygon shape from SwiftUI view to Photo Library

Save different polygon shapes from SwiftUI view to Photo Library

Save different polygon shapes from SwiftUI view to Photo Library

Conclusion

I feel that saving a SwiftUI view as an image in the Photo Library should be native to SwiftUI, but it is not there yet. So it can be done by first converting the SwiftUI view to a UIImage and then saving this to the Photo Library. The NSPhotoLibraryAddUsageDescription property has to be set in the info properties list for the app, with text explaining why the App needs access to Photos. Converting the SwiftUI view to a UIImage is done by defining an extension on the View protocol that uses UIKit to do the conversion. The extension method can then be applied to the view just before sending to the Photo Library.

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.

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.