UIBezierPath - Add rounded corner
Asked Answered
T

2

7

I am using a UIBezierPath to draw a curved line. The curve works however, I am unable to curve the edges of the line.

enter image description here

If you look at the top/bottom end of the curve, you can see that the edges are flattened out, thats not what I want. Is there a way to curve the edges?

I am using a simple UIBezierPath to draw an (almost) semi circle. This creates the curved line shape that I want:

CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:70 startAngle:1.0472 endAngle:5.23599 clockwise:NO].CGPath;
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor colorWithWhite:1.0 alpha:0.2].CGColor;
circle.lineWidth = 18.0;
circle.cornerRadius = 10.0;
circle.position = CGPointMake(100, 100);
circle.anchorPoint = CGPointMake(0.5, 0.5);
[mainView.layer addSublayer:circle];

Despite setting the cornerRadius property, the corners are not curved. What am I doing wrong?

Teahan answered 14/2, 2017 at 10:6 Comment(0)
M
12

Include the following.

circle.lineCap = kCALineJoinRound;

For Swift 3.0 and above

circle.lineCapStyle = .Round;
Monumental answered 14/2, 2017 at 10:17 Comment(0)
W
1

Swift 4.0

circle.lineCap = kCALineCapRound

and if you want your lines intersections to also be rounded set

circle.lineJoin = kCALineCapRound

as well.

Worldweary answered 7/2, 2018 at 3:6 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.