Search code examples
iosswiftuiviewuibezierpathcashapelayer

ios-UIBezierPath stroke by percentage for anti-clockwise with start for arc is from vertical downward position

I am trying to create anticlockwise UIBezierPath with start of arc is negative y axis (just for visualization).

enter image description here 

let arcPathForLayer = UIBezierPath(arcCenter: upperCenterPoint, radius: radius, startAngle: arcPathStartAngle, endAngle: (arcPathEndAngle), clockwise: false)

Normally for clockwise UIBezierPath, start and end angle is 0.0pi and 2.0pi respectively -for if the path is to start form positive x axis.

But for this case where UIBezierPath is anti clockwise and start of arc is negative y axis -the start angle and end angle is little confusing to calculate. So I will post the answer for the same.

Solution

  • Here is the visualization for solution:

    here is the picture


    So the start angle is 0.5pi and end is -1.5pi,
    now for drawing the stroke for 25% --> the value of end angle = 0pi,
    for 50% --> end angle = -0.5pi,
    and on same note for 100% --> end angle = -1.5pi

    here is the formula to calculate the same:

    endAngle = (0.5 - (2 * percentageForProgress)) * .pi