21

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;
}

enter image description here

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.

2 Answers 2

23

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).

1
  • 1
    THanks. Can you explain how to shift the line path? Never mind. Got it.
    – user1178952
    Commented Aug 2, 2013 at 0:36
10

You'd rather choose your view's bounds property for calculation. Frame property won't work properly if it's origin is greater than (0,0). You can use CGRectInsets to adjust your circle's rectangle instead of performing transform calculations. This will automatically position the rectangle centered within the original rectangle.

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        CAShapeLayer *borderLayer = [CAShapeLayer layer];
        borderLayer.fillColor = [UIColor whiteColor].CGColor;
        CGFloat lineWidth = 5;
        CGRect rect = CGRectInset(self.bounds, lineWidth / 2, lineWidth / 2);
        borderLayer.path = [UIBezierPath bezierPathWithOvalInRect:rect].CGPath;
        borderLayer.strokeColor = [[UIColor redColor] CGColor];
        borderLayer.lineWidth = lineWidth;
        [self.layer addSublayer:borderLayer];
    }
    return self;
}
1
  • Thanks for the CGRectInset tip, this is what I've ended up with in Swift 3: let delta = type(of: self).StrokeLineWidth / 2.0 let rect = contentView.bounds.insetBy(dx: delta, dy: delta)
    – Lucien
    Commented Jul 28, 2017 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.