具有透明圆角的 UIImage

Question

我使用以下代码向 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);
}

Answer 1

下面是使用 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 参数 - 这使得图像上下文透明，因此剪裁的区域是透明的。

Answer 2

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

听起来像是图书馆的工作

Answer 3

创建位图上下文后立即使用以下命令清除它：

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

Answer 4

卢基亚在你的问题下面的评论是你可能想做的。

确保导入 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 添加为子视图后释放它即可。

Answer 5

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