iOS 开发中利用 Quartz 2D 获得圆角图片

最新推荐文章于 2021-11-10 11:58:38 发布

原创最新推荐文章于 2021-11-10 11:58:38 发布 · 8k 阅读

0 ·

CC 4.0 BY-SA版权

【只言片语IOS】专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用Quartz2D将普通图片加工为圆角图片，提供代码示例并展示实际效果，适用于自定义头像等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景:

现在社交软件中,圆角的图片可以说是泛滥了,原来方方正正的 QQ 头像,都被世俗磨平了...

那么怎么将一张图片加工成圆角呢?

你可能会说:"找美工啊!" 对!偷懒必备口诀之 "找美工!" 但是,如果用户自己要上传自定义头像呢?

还是一要程序处理嘛!

下面我们利用强大的Quartz 2D 来自己加工图片

直接上代码:

代码:

我是给 UIImage 增加了一个分类,以后直接各种用

+ (instancetype)imageWithIcon:(NSString *)icon border:(NSInteger)border color:(UIColor *)color
{
    // 0.获取原图
    UIImage *image = [UIImage imageNamed:icon];
    
    // 1.创建图片上下文
    CGFloat margin = border;
    CGSize size = CGSizeMake(image.size.width + margin, image.size.height + margin);
    
    // YES 不透明 NO 透明
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    // 2.绘制背景的大圆
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, size.width, size.height));
    [color set];
    CGContextFillPath(ctx);
    
    // 3.绘制小圆
    CGFloat smallX = margin * 0.5;
    CGFloat smallY = margin * 0.5;
    CGFloat smallW = image.size.width;
    CGFloat smallH = image.size.height;
    CGContextAddEllipseInRect(ctx, CGRectMake(smallX, smallY, smallW, smallH));
    
    // 4.指定可用的范围,这个范围是从这句代码之后,也就是说,之前的不受影响
    CGContextClip(ctx);
    
    // 5.绘图图片
    [image drawInRect:CGRectMake(smallX, smallY, smallW, smallH)];
    
    // 6.取出图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    return newImage;
    
}

分类弄好了,我们来看看效果:

原图:

处理好的:(请不要在意我的背景)

调用代码:

 UIImage *image = [UIImage imageWithIcon:@"3.jpg" border:4 color:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.25]];

注意:最好弄个透明度,否则怎么调都好难看的说..