CODEWITHSUNDEEP
iosswiftswiftui
G. Marc
G. Marc

Reputation: 5997

How to draw an arc with SwiftUI?

I'd like to draw an arc shape with SwiftUI. I was looking for something like a segment modifier to use on Circle(), but I couldn't find one. I should be able to set a start and end angle.

Upvotes: 24

Views: 21990

Answers (3)

user14305195
user14305195

Reputation: 859

Another solution to this problem can be done in the following way:

Circle()
   .trim(from: 0.25, to: 1.0)
   .rotation(.degrees(-90))
   .stroke(Color.black ,style: StrokeStyle(lineWidth: 3, lineCap: .butt, dash: [5,3], dashPhase: 10))
   .frame(width: 52, height: 52)

Which will produce:

enter image description here

Depending on what you are looking to do you can choose to do the rotation. This can obviously be extend to be a View Modifier depending on your use case and if its even needed (This seems simple enough).

Upvotes: 28

kontiki
kontiki

Reputation: 40489

You should really check this: https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes

And here's a shortcut:

enter image description here

import SwiftUI

struct ContentView : View {
    var body: some View {
        MyShape()
    }
}

struct MyShape : Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()

        p.addArc(center: CGPoint(x: 100, y:100), radius: 50, startAngle: .degrees(0), endAngle: .degrees(90), clockwise: true)

        return p.strokedPath(.init(lineWidth: 3, dash: [5, 3], dashPhase: 10))
    }    
}

Upvotes: 49

Prashant Tukadiya
Prashant Tukadiya

Reputation: 16416

You can use Path to draw the arc

First define path 

let arc = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0),
                              radius: 60,
                              startAngle: .pi ,
                              endAngle: 0.2,
                              clockwise: true)

then

            Path(arc.cgPath).foregroundColor(Color.blue)

Upvotes: 0

Related Questions