CODEWITHSUNDEEP
swiftuibezierpath
prawn
prawn

Reputation: 2653

Drawing a partial circle

I'm writing a program that will take a number between 0 and 1, and then spits out a circle (or arc I guess) that is completed by that much.

So for example, if 0.5 was inputted, the program would output a semicircle

if 0.1, the program would output a tiny little arc that would ultimately be 10% of the whole circle.

I can get this to work by making the angle starting point 0, and the angle ending point 2*M_PI*decimalInput

However, I need to have the starting point at the top of the circle, so the starting point is 3*M_PI_2 and the ending point would be 7*M_PI_2

I'm just having trouble drawing a circle partially complete with these new starting/ending points. And I'll admit, my math is not the best so any advice/input is appreciated

Here is what I have so far

var decimalInput = 0.75 //this number can be any number between 0 and 1
let start = CGFloat(3*M_PI_2)
let end = CGFloat(7*M_PI_2*decimalInput)

let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)

circlePath.stroke()

I just cannot seem to get it right despite what I try. I reckon the end angle is culprit, unless I'm going about this the wrong way

Upvotes: 1

Views: 5817

Answers (2)

xavi.pedrals
xavi.pedrals

Reputation: 1644

You can use this extension to draw a partial circle

extension UIBezierPath {
    func addCircle(center: CGPoint, radius: CGFloat, startAngle: Double, circlePercentage: Double) {
        let start = deg2rad(startAngle)
        let end = start + CGFloat(2 * Double.pi * circlePercentage)
        addArc(withCenter: center,
               radius: radius,
               startAngle: start,
               endAngle: end,
               clockwise: true)
    }

    private func deg2rad(_ number: Double) -> CGFloat {
        return CGFloat(number * Double.pi / 180)
    }
}

enter image description here

Example usage (you can copy paste it in a playground to see the result)

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.green

let layer = CAShapeLayer()
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.clear.cgColor
layer.lineWidth = 8

let path = UIBezierPath()
path.addCircle(center: CGPoint(x: 50, y: 50), radius: 50, startAngle: 270, circlePercentage: 0.87)
layer.path = path.cgPath

view.layer.addSublayer(layer)
view.setNeedsLayout()

Upvotes: 0

rob mayoff
rob mayoff

Reputation: 385610

The arc length is 2 * M_PI * decimalInput. You need to add the arc length to the starting angle, like this:

let circleCenter = CGPointMake(100, 100)
let circleRadius = CGFloat(80)
var decimalInput = 0.75
let start = CGFloat(3 * M_PI_2)
let end = start + CGFloat(2 * M_PI * decimalInput)
let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
XCPCaptureValue("path", circlePath)

Result:

arc

Note that the path will be flipped vertically when used to draw in a UIView.

Upvotes: 5

Related Questions