How to create a circular dotted line as a CALayer?

Question

I read this post Draw dotted (not dashed!) line, with IBDesignable in 2017 about drawing a dotted line (rather than a dashed line). However, I am not too familiar with graphics generally and I'm wondering how I can do this with a CALayer (so I don't have to do the whole get current graphics context thing).

I am trying to produce a dotted line that looks like this (the white part, ignore the background):

Here's the code I have working to produce a dotted line:

CAShapeLayer *shapelayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[path setLineCapStyle:kCGLineCapRound];
UIColor *fill = [UIColor whiteColor];
shapelayer.strokeStart = 0.0;
shapelayer.strokeColor = fill.CGColor;
shapelayer.lineWidth = 4.0;
shapelayer.lineJoin = kCALineJoinRound;
shapelayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:4],[NSNumber numberWithInt:6 ], nil];
shapelayer.path = path.CGPath;

return shapelayer;

How can I mirror the code in the SO post I referenced but continue using a CALayer?

I tried modifying the code from that post like so:

UIBezierPath * path = [[UIBezierPath alloc] init];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[path setLineWidth:8.0];
CGFloat dashes[] = { path.lineWidth, path.lineWidth * 2 };
[path setLineDash:dashes count:2 phase:0];
[path setLineCapStyle:kCGLineCapRound];
[path stroke];

CAShapeLayer *returnLayer = [CAShapeLayer layer];
returnLayer.path = path.CGPath;
return returnLayer;

However, this ends up drawing nothing.

I don't know about the CALayer, but clearly, if you look at the `UIBezierPath`, you draw a "straight line", and not a circular one. — Larme, Jun 22 '16 at 15:32

score 6 · Answer 1 · answered Jun 22 '16 at 17:05

I hope this will help you.

CAShapeLayer *circleLayer = [CAShapeLayer layer];
[circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)] CGPath]];
circleLayer.lineWidth = 2.0;
[circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
[circleLayer setFillColor:[[UIColor clearColor] CGColor]];
circleLayer.lineJoin = kCALineJoinRound;
circleLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:2],[NSNumber numberWithInt:3 ], nil];
// self.bgImage is parentView
[[self.bgImage layer] addSublayer:circleLayer];

self.bgImage.layer.borderWidth = 1.0f;
self.bgImage.layer.borderColor = [[UIColor blueColor]CGColor];

I have attached the output of the image

score 1 · Answer 2 · answered Jun 22 '16 at 17:25

1

In my case I had to set the lineCapStyle rather than the lineJoinStyle.

answered Jun 22 '16 at 17:25

helloB

3,472
10
40
87

How to create a circular dotted line as a CALayer?

2 Answers2