Granit Granit - 1 month ago 21
Objective-C Question

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

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

Answer

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.

Comments