iOS上带有圆角和透明背景的石英UIImage

Question

我已使用this solution将角半径应用于UIImage中的Quartz。它像我预测的那样工作正常。

然而，图像外部的角落区域不透明，但有些颜色为白色：

上图显示了已处理图片的左上角，它是不透明且不透明的。

我希望裁剪边缘完全透明。我怎样才能做到这一点？

编辑：如果我想用UIImageView执行此操作，我已经完成了此操作。因此，请注意，我希望Quartz UIImage对象上的UIImageView不是{{1}}。

解决方案：问题实际上不在绘图代码中，而在于将该图像写入文件系统。我将图像保存为JPEG而不是PNG。这就是角落不透明的原因，因为JPEG没有alpha滤镜。

Answer 1

我通常使用在UIImage上实现的自定义类别来裁剪带圆角的图像。这取自this回答。

void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight, BOOL top, BOOL bottom)
{
    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, 0);

    NSLog(@"bottom? %d", bottom);

    if (top) {
        CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 3);
    } else {
        CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 0);
    }

    if (bottom) {
        CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 3);
    } else {
        CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 0);
    }

    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 0);
    CGContextClosePath(context);
    CGContextRestoreGState(context);
}

- (UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom {
    int w = source.size.width;
    int h = source.size.height;

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

    CGContextBeginPath(context);
    CGRect rect = CGRectMake(0, 0, w, h);
    addRoundedRectToPath(context, rect, 4, 4, top, bottom);
    CGContextClosePath(context);
    CGContextClip(context);

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

    CGImageRef imageMasked = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);

    return [UIImage imageWithCGImage:imageMasked];    
}

Answer 2

transparent使用此：

 const float colorMasking[6] = {1.0, 1.0, 0.0, 0.0, 1.0, 1.0};
 yourImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(yourImage.CGImage, colorMasking)];

编辑：在UIImage类别的方法中添加这两行

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);

Answer 3

在drawRect方法中添加这些波纹线。

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, rect);
    ///your another code here
}

创建上下文后，需要从该Rect中清除另一个上下文...所以在该行之后添加此行CGContextClearRect(context, rect);。

Answer 4

问题实际上不在绘图代码中，而在于将该图像写入文件系统。我将图像保存为JPEG而不是PNG。这就是角落不透明的原因，因为JPEG没有alpha滤镜。

刚刚替换了这行代码：

[UIImageJPEGRepresentation(image, 0.75) writeToFile:path atomically:YES];

......用这个：

[UIImagePNGRepresentation(image) writeToFile:path atomically:YES];

Answer 5

试试此代码

Image.layer.cornerRadius = 10.0;
Image.layer.borderColor = [UIColor blackColor].CGColor;
Image.layer.borderWidth = 0.5;
Image.clipsToBounds = YES;
Image.backgroundColor = [UIColor clearColor];

希望它可以帮到你

编辑： -

我认为你只需要添加： -

Image.clipsToBounds = YES;