A shortcut to drawing an arc with SwiftUI

You have to draw an arc or a semicircle in SwiftUI. The most obvious way to do that is to use a Path. In this blog post you can see how to do that, but it is really not rocket science.

Turns out there is an even quicker and easier way to draw a fraction of a circle. SwiftUI’s Shapes have a method called trim(from:to:) that allows you the specify what fraction of a Shape’s path you want to draw. If you want to draw a semi circle you could call that method like this:

Circle()
    .trim(from: 0.0, to: 0.5)
    .stroke(Color("pdCyan"), lineWidth: 10)
    .frame(width: 100, height: 100)

Which would give you this:

By varying the parameters for from and to you can get almost all variations of an arc:

ZStack {
    Circle()
        .trim(from: 0.0, to: 0.25)
        .stroke(Color.blue, lineWidth: 10)
        .frame(width: 70, height: 70)
    Circle()
       .trim(from: 0.20, to: 0.75)
       .stroke(Color.green, lineWidth: 10)
       .frame(width: 100, height: 100)
    Circle()
       .trim(from: 0.65, to: 1.0)
       .stroke(Color.red, lineWidth: 10)
       .frame(width: 130, height: 130)
}

Which results in this:

As you can see the path of a Circle shape starts at the right center (or 03:00 hours on a clock). Because the value that you pass as from parameter has to be smaller than the value for the to parameter, you cannot draw a semicircle from top to bottom like this because that would mean that you would have to set from to 0.75 and to to 0.25. That is not allowed.

With a little trick you can still achieve that. You simply draw a semicircle from 0.0 to 0.5 and then rotate the shape by -90 degrees. IMHO still simpler that using a Path for this.

Circle()
    .trim(from: 0.0, to: 0.5)
    .stroke(Color.orange, lineWidth: 10)
    .rotationEffect(.degrees(-90))
    .frame(width: 100, height: 100)

You can use this trim method on all SwiftUI’s built-in Shapes. For example if you want to draw a right triangle with SwiftUI you can do this:

Rectangle()
    .trim(from: 0.0, to: 0.5)
    .fill(Color("pdMagenta"))
    .frame(width: 120, height: 80)

Of course you could easily draw a Path for this, but I think the trim method is a pretty cool tool that you can use for drawing semicircles, quarter-circles or triangles.