How can I hide a square image with a circle, and also place a black frame around the image

Question

I have a 40x40 square image that I want to do with cropping, but also put a black border with 5 pixels around the image.

I have the following that masks a square image, so its now round

UIImage *image = self.imageView.image; CGSize imageSize = image.size; CGRect imageRect = CGRectMake(0, 0, imageSize.width, imageSize.height); UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0); // Create the clipping path and add it UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:imageRect]; [path addClip]; [image drawInRect:imageRect]; UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); self.imageView.image = roundedImage; 

But now I also need to add a round frame around it. Do I need a new path or can I just stick on one in the code above?

Answer 1

Add the following three lines to your code (with any color and stroke width):

 CGContextSetStrokeColorWithColor(ctx, [[UIColor greenColor] CGColor]); [path setLineWidth:50.0f]; [path stroke]; 

So it will be:

 UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0); CGContextRef ctx = UIGraphicsGetCurrentContext(); // Create the clipping path and add it UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:imageRect]; [path addClip]; [image drawInRect:imageRect]; CGContextSetStrokeColorWithColor(ctx, [[UIColor greenColor] CGColor]); [path setLineWidth:50.0f]; [path stroke]; UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); self.imageView.image = roundedImage;