Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 213
michaellindahl Avatar asked Aug 03 '15 19:08

michaellindahl


1 Answers

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

like image 117
michaellindahl Avatar answered Nov 19 '22 15:11

michaellindahl