带有透明圆角的UIImage

时间:2011-02-03 11:45:36

标签: iphone uiimage rounded-corners

我正在使用以下代码为我的UIImage添加圆角,但问题是圆角显示“白色”区域而不是透明或“清晰”。我在这做错了什么:

- (UIImage *)makeRoundCornerImageWithCornerWidth:(int)cornerWidth cornerHeight:(int)cornerHeight {
    UIImage * newImage = nil;

    if (self != nil)    {
        NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
        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);
        [self addRoundedRectToPath:context rect:rect width:cornerWidth height:cornerHeight];

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

        [pool release];
    }

    return [newImage autorelease];
}


- (void)addRoundedRectToPath:(CGContextRef)context rect:(CGRect)rect width:(float)ovalWidth height:(float)ovalHeight {
    float fw, fh;

    // If the width or height of the corner oval is zero, then it reduces to a right angle,
    // so instead of a rounded rectangle we have an ordinary one.
    if (ovalWidth == 0 || ovalHeight == 0) {
        CGContextAddRect(context, rect);
        return;
    }

    //  Save the context's state so that the translate and scale can be undone with a call
    //  to CGContextRestoreGState.
    CGContextSaveGState(context);

    //  Translate the origin of the contex to the lower left corner of the rectangle.
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));

    //Normalize the scale of the context so that the width and height of the arcs are 1.0
    CGContextScaleCTM (context, ovalWidth, ovalHeight);

    // Calculate the width and height of the rectangle in the new coordinate system.
    fw = CGRectGetWidth (rect) / ovalWidth;
    fh = CGRectGetHeight (rect) / ovalHeight;

    // CGContextAddArcToPoint adds an arc of a circle to the context's path (creating the rounded
    // corners).  It also adds a line from the path's last point to the begining of the arc, making
    // the sides of the rectangle.
    CGContextMoveToPoint(context, fw, fh/2);                // Start at lower right corner
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);   // Top right corner
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);     // Top left corner
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);      // Lower left corner
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);    // Back to lower right

    // Close the path
    CGContextClosePath(context);

    // Restore the context's state. This removes the translation and scaling
    // but leaves the path, since the path is not part of the graphics state.
    CGContextRestoreGState(context);
}

5 个答案:

答案 0 :(得分:11)

这是一个使用UIKit调用的简单公式:

- (UIImage*) roundCorneredImage: (UIImage*) orig radius:(CGFloat) r {
    UIGraphicsBeginImageContextWithOptions(orig.size, NO, 0);
    [[UIBezierPath bezierPathWithRoundedRect:(CGRect){CGPointZero, orig.size} 
                                cornerRadius:r] addClip];
    [orig drawInRect:(CGRect){CGPointZero, orig.size}];
    UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}

注意NO参数 - 这使图像上下文透明,因此剪切区域是透明的。

答案 1 :(得分:4)

https://github.com/detroit-labs/AmazeKit

听起来像图书馆的工作

答案 2 :(得分:1)

创建位图上下文后立即将其清除:

CGContextClearRect (context, CGRectMake(0, 0, w, h));

答案 3 :(得分:1)

lukya在您的问题下面的评论是您可能想要做的。

确保导入QuartzCore:

#import <QuartzCore/QuartzCore.h>

然后,如果你有想要圆角的图像的UIImageView,只需调用(假设imageView是属性而cornerRadius是所需的角半径):

self.imageView.layer.cornerRadius = cornerRadius;
self.imageView.clipsToBounds = YES;

由于你已经有了self.CGImage,你可以这样做来创建一个UIImageView:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageWithCGImage:self.CGImage]];

确保在将其添加为子视图后释放imageView。

答案 4 :(得分:1)

profileImageView.layer.cornerRadius = profileImageView.frame.size.height/2;
profileImageView.clipsToBounds = YES;