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!