Unable to get rid of spike on bezier path

问题

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:

(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];

回答1:

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.

来源：https://stackoverflow.com/questions/25164748/unable-to-get-rid-of-spike-on-bezier-path