CODEWITHSUNDEEP
objective-cuibezierpath
Granit
Granit

Reputation: 1281

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

Upvotes: 9

Views: 3587

Answers (3)

Stephen Norris
Stephen Norris

Reputation: 23

The swift equivalent is:

let circlePath = UIBezierPath(…)
circlePath.lineCapStyle = .round

Upvotes: 2

Wain
Wain

Reputation: 119031

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.

Upvotes: 20

Kumar Swamy
Kumar Swamy

Reputation: 774

To make corner as round you can use this.

arc.lineCap = @"round";

Upvotes: 8

Related Questions