1

I'm drawing some simple bezier paths, but I'm finding it impossible to remove the spikes created when the angle between line segments is small:

enter image description here

(Note: The circle is from a separate drawing operation, but I'm trying to make sure the line does not spike past the circle...).

I've tried all kinds of variations of lineCapStyle and lineJoinStyle but nothing seems to work. In addition to what is shown below I have tried using a Miter Join with 'setMiterLimit'.

Here's my line drawing code snip:

CAShapeLayer *myShapeLayer=[CAShapeLayer layer];
UIBezierPath *myPath=[UIBezierPath bezierPath];
[myPath moveToPoint:tmpPoint];
[myPath addLineToPoint:tmpPoint];         
[myPath setLineCapStyle:kCGLineCapRound];
[myPath setLineJoinStyle:kCGLineJoinRound];

myShapeLayer.path=[myPath CGPath];
myShapeLayer.strokeColor = [[UIColor yellowColor] CGColor];
myShapeLayer.fillColor = [[UIColor clearColor] CGColor];
myShapeLayer.lineWidth = 3.0;

Just in case - here's the Miter code I've used, varying the value rom 0.0 to 100.0 - all with no effect:

[myPath setLineCapStyle:kCGLineCapRound];
[myPath setLineJoinStyle:kCGLineJoinMiter];
[myPath setMiterLimit:1.0];
rmaddy
  • 314,917
  • 42
  • 532
  • 579
wayneh
  • 4,393
  • 9
  • 35
  • 70
  • Have a look at `miterLimit` https://developer.apple.com/library/ios/documentation/uikit/reference/UIBezierPath_class/Reference/Reference.html#//apple_ref/occ/instp/UIBezierPath/miterLimit – geedubb Aug 06 '14 at 15:51
  • geedubb - you might have missed my last edit - I've tried that but it doesn't seem to work either. – wayneh Aug 06 '14 at 15:52

1 Answers1

3

You should be setting lineJoin on the shape layer instead of the path:

myShapeLayer.lineJoin = kCALineJoinRound;

The confusion comes from the fact that UIBezierPath has the ability to draw the path (by calling fill and stroke on the path). The configuration of line joins and line caps on the path is only affecting this drawing.

However, since you are drawing the path using a CAShapeLayer, the configurations of both line joins and line caps should be done on the shape layer.

David Rönnqvist
  • 56,267
  • 18
  • 167
  • 205
  • Works! But why can it also be set on the path if it has no effect? Thanks! – wayneh Aug 06 '14 at 16:13
  • @wayneh The configuration on the bezier path effect how the bezier path draws the path, the configuration on the shape layer effect how the shape layer draws the path. – David Rönnqvist Aug 06 '14 at 16:15
  • Did you mean 'on the path affects the path, on the layer affects the stroke/fill' ? – wayneh Aug 06 '14 at 16:16