Quartz2D的基本使用（第四讲：图片裁剪-QQ圆形头像制作）

Sian

一、基本思路

    1、开启位图上下文(UIGraphicsGetCurrentContext()为普通图层上下文，即view的layer层)，位图上下文使用函数UIGraphicsBeginImageContext(CGSize size)或UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)开启；

    2、描述一个原图加边框大小的圆形区域；(假设原图为正方形，原图边长为10，边框为2，则新区域边长为14)

    3、将该区域填充为白色并渲染上去

    4、以原图片大小描述一个新的圆形区域并设置合适的大小尺寸使其居于上一个白色圆形的正中心

    5、裁剪该圆形区域

    6、将原图片渲染到新的圆形区域，由于上面的剪裁关系，超出圆形区域自动不可见

    7、获取上下文渲染出来的图片设置某个UIImageView上查看效果

    8、为方便使用，将上述方面封装成UIImage的Category，传入图片名及边框大小即可返回新的圆形头像图片

二、关键代码

[Objective-C] 纯文本查看 复制代码

//
//  UIImage+SA.m
//  Quartz2D
//
//  Created by 余西安 on 14/12/1.
//  Copyright (c) 2014年 Sian. All rights reserved.
//

#import "UIImage+SA.h"

@implementation UIImage (SA)

+ (instancetype)roundCutImage:(NSString *)imageName edgeWidth:(float)width
{
    // 0、新图片的大小为原有图片基本上加外边框宽度
    UIImage *image = [UIImage imageNamed:imageName];
    CGSize newSize = CGSizeMake(image.size.width + width * 2, image.size.height + width * 2);
    
    // 1、开启位图上下文
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    
    // 2、获取位图上下文
    CGContextRef c = UIGraphicsGetCurrentContext();
    
    // 3、以新图片大小画底色为白色的圆
    CGContextAddEllipseInRect(c, (CGRect){CGPointZero, newSize});
    CGContextSetFillColorWithColor(c, [UIColor whiteColor].CGColor);
    CGContextFillPath(c);
    
    // 4、在图像上下文中描述一个原图大小的圆
    CGRect imageRect = (CGRect){width, width, image.size};
    CGContextAddEllipseInRect(c, imageRect);
    
    // 5、对描述进行裁剪，即其他区域不可渲染
    CGContextClip(c);
    
    // 6、将原图片渲染到上下文（被裁剪区域不可见）
    [image drawInRect:imageRect];
    
    // 7、获取上下文渲染出来的图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    // 8、关闭上下文描述
    UIGraphicsEndImageContext();
    
    return newImage;
}

@end

三、效果展示

    左图：self.iconView.image = [UIImage imageNamed:@"sian.png"];

    右图：self.iconView.image = [UIImage roundCutImage:@"sian.png" edgeWidth:5];

  

四、Demo下载

游客，如果您要查看本帖隐藏内容请回复

微笑刺客

好东西，现在正需要呢

搬砖的蜗牛君

非常棒的教程啊···楼主 我要拜你为师··

asd82224f

下载下来看看@

活在梦里丶

下载看一看

zj0517

支持一下:)