How to round edges of an UIImage? - iphone

Question

I try to speed up the scrolling of my UITableView. I do this by do the drawing of the cells by myself instead of adding subviews.
One of the things I want to draw is an image. The image should have rounded edges. When I drew the cell using subviews I altered the layer of the UIImageView to have round corners.
Now I draw the UIImage directly and does not have a layer to modify. How can I draw the image with round edges?

Answer 1

I'm pretty sure I got this code from stackoverflow.
- (UIImage*)maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef sourceImage = [image CGImage];
CGImageRef imageWithAlpha = sourceImage;
//add alpha channel for images that don't have one (ie GIF, JPEG, etc...)
//this however has a computational cost
// needed to comment out this check. Some images were reporting that they
// had an alpha channel when they didn't! So we always create the channel.
// It isn't expected that the wheelin application will be doing this a lot so
// the computational cost isn't onerous.
//if (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNone) {
imageWithAlpha = CopyImageAndAddAlphaChannel(sourceImage);
//}
CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);
CGImageRelease(mask);
//release imageWithAlpha if it was created by CopyImageAndAddAlphaChannel
if (sourceImage != imageWithAlpha) {
CGImageRelease(imageWithAlpha);
}
UIImage* retImage = [UIImage imageWithCGImage:masked];
CGImageRelease(masked);
return retImage;
}
and I call it with:
customImage = [customImage maskImage:customImage withMask:[UIImage imageNamed:#"CircularMask.png"]];
[customImageView setImage:customImage];
Hope that helps!

Answer 2

It sounds like you simply want to remove the corners from a rectangular image: Create a new image via CGImage APIs -- you will apply a mask your input image.

Answer 3

Do you use caching for the images?
If so I'd recommend that you apply this to the UIImage before you cache it so once it's been drawn with rounded corners you can reuse that image.
Here's a category on UIImage that you can use to get a rounded UIImage.
I might have found this code somewhere so I apologize in advance to the original author for not giving him/her a credit.
#import <Foundation/Foundation.h>
#interface UIImage (DPRounded)
- (UIImage *)imageWithCornerRadius:(CGFloat)radius;
#end
#implementation UIImage (DPRounded)
static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight)
{
float fw, fh;
if (ovalWidth == 0 || ovalHeight == 0) {
CGContextAddRect(context, rect);
return;
}
CGContextSaveGState(context);
CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM (context, ovalWidth, ovalHeight);
fw = CGRectGetWidth (rect) / ovalWidth;
fh = CGRectGetHeight (rect) / ovalHeight;
CGContextMoveToPoint(context, fw, fh/2);
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);
CGContextClosePath(context);
CGContextRestoreGState(context);
}
- (UIImage *)imageWithCornerRadius:(CGFloat)radius
{
UIImage * newImage = nil;
if(self != nil)
{
int w = self.size.width;
int h = self.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextBeginPath(context);
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
addRoundedRectToPath(context, rect, radius, radius);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), self.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
newImage = [[UIImage imageWithCGImage:imageMasked] retain];
CGImageRelease(imageMasked);
}
return [newImage autorelease];
}
#end

Answer 4

(Before you embark on this, please check that you're dequeueing table view cells correctly. This will do a lot to improve performance.)
Draw the image yourself with rounded corners and have the background of the cell be transparent, say.
If your cells are of variable height,
Use resizableImageWithCapInsets: (iOS5.0 and up), or the deprecated stretchableImageWithLeftCapWidth:topCapHeight: for earlier iOSes, to return an image that will expand by repeating a central block of your image. This will also protect the curvature of the corners when autoresizing is carried out. Or,
Cut up your image into pieces and have separate UIImageView instances for each piece and set autoresizing appropriately for each piece. This is best option as far as performance goes, but you might end up with as many as nine outlets.