How to mask a square image into an image with round corners in iOS?

Question

How can you mask a square image into an image with round corners?

Answer 1

You can use CoreGraphics to create a path for a round rectangle with this code snippet:

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); } 

And then call CGContextClip(context); to clip it to the rectangle path. Now any drawing done, including drawing an image, will be clipped to the round rectangle shape.

As an example, assuming "image" is a UIImage, and this is in a drawRect: method:

CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); addRoundedRectToPath(context, self.frame, 10, 10); CGContextClip(context); [image drawInRect:self.frame]; CGContextRestoreGState(context); 

Answer 2

Here is an even easier method that is available in iPhone 3.0 and up. Every View-based object has an associated layer. Each layer can have a corner radius set, this will give you just what you want:

UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]]; // Get the Layer of any view CALayer * layer = [roundedView layer]; [layer setMasksToBounds:YES]; [layer setCornerRadius:10.0];  // You can even add a border [layer setBorderWidth:4.0]; [layer setBorderColor:[[UIColor blueColor] CGColor]]; 

To use these methods you might need to add:

#import <QuartzCore/QuartzCore.h>