Search code examples
iosobjective-crounded-cornersuibezierpath

Not able to round caps in UIBezierPath Arc even with kCGLineCapRound


I am not able to display rounded caps on my Arc created using UIBezierPath. It's still perfectly squared regardless I set kCGLineCapRound or not.

This topic should be same as this one, however solution is not working.

Here is the example code I have in viewWillAppear (for test purposes only):

int radius = 100;
CAShapeLayer *arc = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES];
path.lineCapStyle = kCGLineCapRound;

arc.path = path.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.lineWidth = 10.0f;
arc.cornerRadius = 3.0f;

Here is how it looks:

whyy

I am helpless so I would appreciate any help. Thanks guys.


Solution

  • Use the lineCap property of the CAShapeLayer rather than the lineCapStyle of the path.

    arc.lineCap = kCALineCapRound;
    

    If you are calling the path's stroke method (e.g. if you're doing this in drawRect or manually drawing in a UIGraphicsContext) then set attributes like the cap or join styles in the UIBezierPath. But when using CAShapeLayer, the attributes are set on the shape layer, not the path.