How to smooth the joint of lines in bezier path?

Question

I am trying to draw a cuboid shape using UIBezierPath. My drawing code is below:

( (x, y) is origin of my UIView and (h, w) is its size)

UIBezierPath *bpath1 = [UIBezierPath bezierPath];
[bpath1 moveToPoint:CGPointMake(x, y + h * 0.4)];
[bpath1 addLineToPoint:CGPointMake(x, y + h)];
[bpath1 addLineToPoint:CGPointMake(x + w - (w * 0.4), y + h)];
[bpath1 addLineToPoint:CGPointMake(x + w - (w * 0.4), y + h * 0.4)];
[bpath1 closePath];


UIBezierPath *bpath2 = [UIBezierPath bezierPath];
[bpath2 moveToPoint:CGPointMake(x + w * 0.4, y)];
[bpath2 addLineToPoint:CGPointMake(x + w, y)];
[bpath2 addLineToPoint:CGPointMake(x + w - (w * 0.4), y + h * 0.4];
[bpath2 addLineToPoint:CGPointMake(x, y + h * 0.4];
[bpath2 closePath];

UIBezierPath *bpath3 = [UIBezierPath bezierPath];
[bpath3 moveToPoint:CGPointMake(x + w, y)];
[bpath3 addLineToPoint:CGPointMake(x + w, y + h - (h * 0.4))];
[bpath3 addLineToPoint:CGPointMake(x + w - (w * 0.4), y + h)];
[bpath3 addLineToPoint:CGPointMake(x + w - (w * 0.4), y + h * 0.4];
[bpath3 closePath];

I created 3 paths because I wanted different alpha values for every path. I got the desired output which is below:

General output

But to my surprise for very few values of h(height), I got the shape as below:

Strange shape for some <code>h</code> values

Now, number of values for which this shape comes up is very few. Since rendering code is same every time, I don't understand this strange behaviour of bezier paths. Why bezier path is showing this behaviour and is there any way to smooth these joints?

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

Take a look at the lineCapStyle and lineJoinStyle. Specifically, I think it's because the lineJoinStyle is defaulting to Miter, and either changing it to Round or changing the miterLimit.

I believe this has the same solution as UIBezierPath not drawing a smooth curve

edited May 23 '17 at 12:14

Community

1
1

answered Sep 13 '14 at 03:43

adam.wulf

2,149
20
27

So how to calculate miterLimit value? The link you provided says to set the value to -10, which doesn't solve the problem. – blancos Sep 15 '14 at 05:56

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

If you are drawing on the UIView then the solution of adam works. But if you are drawing on CaShapeLayer (as in my case), then you have to set the lineJoin property of your shapeLayer, not the path. This solution is explained here.

edited May 23 '17 at 11:43

Community

1
1

answered Sep 16 '14 at 06:58

blancos

1,576
2
16
38

How to smooth the joint of lines in bezier path?

2 Answers2