Search code examples
iosobjective-cuiimagecore-graphicspaintcode

iOS UIImage with border has a thick corner-radius


I'm attempting to build a UIImage in code using CoreGraphics (via PaintCode) that has a border and a corner radius. I'm finding that the image has a noticeably thicker border around the corner. This seems like it would either be an iOS bug or something that I'm completely missing. Please advise.

Code:

CGRect rect = CGRectMake(0, 0, 53, 100);

//// UIGraphics for UIImage context
CGContextRef context = UIGraphicsGetCurrentContext();
UIGraphicsPushContext(context);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);

//// Rectangle Drawing
UIBezierPath *rectanglePath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:cornerRadius];
[backgroundColor setFill];
[rectanglePath fill];
[borderColor setStroke];
rectanglePath.lineWidth = 1.4;
[rectanglePath stroke];

//// UIBezierPath to Image
CGContextAddPath(context, rectanglePath.CGPath);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsPopContext();
UIGraphicsEndImageContext();

return image;

Image:

thicker corner radius

Here's what a lineWidth of 1 and width of 60 looks like, it still seems a little thick:

enter image description here


Solution

  • For those of you following along at home:

    Thanks to the helpful @PixelCutCompany I need to inset the bounds for the UIBezierPath so that the border doesn't exceed the frame of the image I am drawing.

    Modified the code as follows for a lineWidth of 1.

    CGRect boundedRectForRadius = CGRectMake(1, 1, 58, 98);
    UIBezierPath *rectanglePath = [UIBezierPath bezierPathWithRoundedRect:boundedRectForRadius cornerRadius:cornerRadius];
    

    Without this, it was cropping the image as so:

    enter image description here