CODEWITHSUNDEEP
iosobjective-ccore-graphicsuibezierpath
blancos
blancos

Reputation: 1614

How to smooth the joint of lines in bezier path?

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?

Upvotes: 0

Views: 1246

Answers (2)

blancos
blancos

Reputation: 1614

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.

Upvotes: 0

adam.wulf
adam.wulf

Reputation: 2169

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

Upvotes: 2

Related Questions