Why does a CAShapeLayer's stroke extend out of the frame?

core-animation, ios, objective-c

Solution

Setting the `lineWidth` draws a line, where the actual path is exactly in the middle of the drawn line.

If you want the drawn line to line up with something, you will have to shift the path by half the `lineWidth`.

You can shift the path by using `- (void)applyTransform:(CGAffineTransform)transform` on `UIBezierPath` and apply a translate transform.

If you want a drawn path to be contained in a certain area, shifting the path doesn't help. In that case just create a smaller path. If you want to draw a 100ptx100pt rect with a line width of 5, you have to draw a path in a 95pt*95pt rect (2.5pt space on either side).

Problem

Here's sample code: ``` //Called by VC: HICircleView *circleView = [[HICircleView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; // init of circle view - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { CAShapeLayer *borderLayer = [CAShapeLayer layer]; borderLayer.fillColor = [UIColor whiteColor].CGColor; borderLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.frame].CGPath; borderLayer.strokeColor = [[UIColor redColor] CGColor]; borderLayer.lineWidth = 5; [self.layer addSublayer:borderLayer]; } return self; } ``` OK, thanks for the answer. to shift i: ``` CGRect rect = CGRectMake(3, 3, self.frame.size.width, self.frame.size.height); borderLayer.path = [UIBezierPath bezierPathWithOvalInRect:rect].CGPath; ``` And made 6 the line width.

Original source