Search code examples
iosuiimagerounded-cornersccsprite

Add rounded corners to UIImage?


I know it is possible to have rounded corners on objects like a UIImageView (I have done it before). But in this case, I need to have my square UIImage to have rounded corners. I know it is more difficult than just doing it to an object but I need this specifically for the UIImage.

Can anyone share a method that is not static and can be implemented in a class that I already made?

I have to do this to a UIImage unless it is possible to add rounded edges to a CCSprite.

Thanks!

Edit2:

    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 *)makeRoundCornerImage : (UIImage*) img : (int) cornerWidth : (int) cornerHeight
{
    UIImage * newImage = nil;

    if( nil != img)
    {
        NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
        int w = img.size.width;
        int h = img.size.height;

        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);

        CGContextBeginPath(context);
        CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
        addRoundedRectToPath(context, rect, cornerWidth, cornerHeight);
        CGContextClosePath(context);
        CGContextClip(context);

        CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);

        CGImageRef imageMasked = CGBitmapContextCreateImage(context);
        CGContextRelease(context);
        CGColorSpaceRelease(colorSpace);
        [img release];

        newImage = [[UIImage imageWithCGImage:imageMasked] retain];
        CGImageRelease(imageMasked);

        [pool release];
    }

    return newImage;
}

Solution

  • Use https://stackoverflow.com/a/8125604/412916 to clip with a UIBezierPath instead. It's simpler.

    Using the code posted above from http://blog.sallarp.com/iphone-uiimage-round-corners/

    // rounded corner 10x10
    UIImage *original = [UIImage imageNamed:@"original.png"];
    UIImage *rounded = [self makeRoundCornerImage:original :10 :10];