Apply rounded corners to arc created with UIBezierPath

I am working on a circular progress bar that i’ve created using UIBezierPath. The progress bar looks like the following picture:

enter image description here

  • Apply gradient color to arc created with UIBezierPath
  • Two UIBezierPaths intersection as a UIBezierPath
  • How can I change the color of an element using a UIBezierPath?
  • iOS: UIBezierPath and CAShapeLayer fillRule
  • How to generate CGPoint-Array out of UIBezierPath (to touch-slide object along given path)
  • Draw ellipse with start and end angle in Objective-C
  • My question is: how to make the edge of the arc rounded and not rectangular?

    The code i used to draw the arc looks like is:

     // Draw the arc with bezier path
            int radius = 100;
    
            arc = [CAShapeLayer layer];
            arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath;
            arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                                        CGRectGetMidY(self.view.frame)-radius);
            arc.fillColor = [UIColor clearColor].CGColor;
            arc.strokeColor = [UIColor purpleColor].CGColor;
            arc.cornerRadius = 0.5;
            arc.lineWidth = 6;
    
            [self.view.layer addSublayer:arc];
    
            // Animation of the progress bar
            drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
            drawAnimation.duration            = 5.0; // "animate over 10 seconds or so.."
            drawAnimation.repeatCount         = 1.0;  // Animate only once..
            drawAnimation.removedOnCompletion = YES;   // Remain stroked after the animation..
            drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
            drawAnimation.toValue   = [NSNumber numberWithFloat:10.0f];
            drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
            [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
    

    I tried to use arc.cornerRadius but it seemed to return nothing.

    Any help would be appreciated.

    Thank you in advance!

    Granit

    2 Solutions Collect From Internet About “Apply rounded corners to arc created with UIBezierPath”

    Set lineCapStyle to kCGLineCapRound (On the bezier path) to draw the ends of the lines with a round edge.

    You can also set the lineCap on the shape layer to do the same thing.

    To make corner as round you can use this.

    arc.lineCap = @"round";