iphone - iOS上带有圆角和透明背景的Quartz UIImage

Question

我已使用此解决方案将角半径应用于UIImagein Quartz。它工作正常，就像我预测的那样。

然而，图像外部的角落区域不是透明的，而是有点白色：

上图显示了处理后图像的左上角不透明且不透明。

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

编辑：如果我想这样做，UIImageView我已经这样做了。所以请记住，我想用Quartzon UIImageobject not来做这个UIImageView。

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

Answer 1

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

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
}

在创建 Context 之后，它需要从该 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;