Arc shape not rendered smoothly - ios

Question

I've created an arc at a 12 o'clock position on a CAShapeLayer and added it as a sublayer onto a UIView. The arc is rough or bumpy. I tried antialiasing, corner radius, line join, and have also tried rasterizing at one point but no luck. Any ideas why it's not smooth and what to do to make it smoother? If make the same arc at 9 or 3 o'clock they are smooth, but not 12 or 6 o'clock. Appreciate any help.
Here's the code:
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, nil, 38.25, 38.25, 25, degreesToRadians(304), degreesToRadians(236), YES);
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
[shapeLayer setAllowsEdgeAntialiasing:YES];
[shapeLayer setEdgeAntialiasingMask:kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge];
[shapeLayer setCornerRadius:2.0];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:[color CGColor]];
[shapeLayer setLineCap:kCALineCapRound];
[shapeLayer setLineWidth:3.0];
[shapeLayer setPath:path];
Here's a link to the arcs. Top and bottom are not smooth like on the left. They look less smooth on a device. Screen capture sort of smoothed them out more than they actually are.
http://oi57.tinypic.com/2wf4i9c.jpg

Answer 1

It looks like your layer is off the pixel bounds. That is, it’s rasterizing the layer, then shifting it by a fractional number of pixels before drawing. My first suggestion would be to round those x.25 values to whole numbers.
By the way, why are you passing 304, 236 as the startAngle and endAngle in CGPathAddArc()? Those parameters are in radians, not degrees.
edgeAntialiasingMask and allowsEdgeAntialiasing has to do with how the edges of the layer’s rectangular bounds are rendered, and should not affect the contents.
Edit: the difference is subtle, but when I stop using fractional values, the slight bumps in the line go away. By the way, if you post your images in .png format, it’s easier to see what’s going on, because they don’t get the artifacting from jpg compression.
// Fractional values
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, nil, 138.25, 138.25, 25, degreesToRadians(304), degreesToRadians(236), YES);
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:[UIColor blueColor].CGColor];
[shapeLayer setLineCap:kCALineCapRound];
[shapeLayer setLineWidth:3.0];
[shapeLayer setPath:path];
CGPathRelease(path);
[self.view.layer addSublayer:shapeLayer];
// Integral values
CGMutablePathRef newPath = CGPathCreateMutable();
CGPathAddArc(newPath, nil, 200, 138, 25, degreesToRadians(304), degreesToRadians(236), YES);
CAShapeLayer *newShapeLayer = [CAShapeLayer layer];
[newShapeLayer setLineJoin:kCALineJoinRound];
[newShapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[newShapeLayer setStrokeColor:[UIColor blueColor].CGColor];
[newShapeLayer setLineCap:kCALineCapRound];
[newShapeLayer setLineWidth:3.0];
[newShapeLayer setPath:newPath];
CGPathRelease(newPath);
[self.view.layer addSublayer:newShapeLayer];
And the result:
When I overlay them in Difference Mode in Photoshop, you can see where the pixels differ: