码迷,mamicode.com
首页 > 移动开发 > 详细

iOS之带有边框的圆形图片裁剪

时间:2016-04-11 13:50:37      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

我们经常需要把一些不是圆形的图片剪切成圆形后来使用,比如QQ头像,微博头像等都是圆形,那么问题来了,该怎么把一张不是圆形的图片剪切成圆形呢?
下面就是其中一种可以实现这种需求的方法:
 
具体实现思路:
1.假设边框宽度为BorderW
2.开启的图片上下文的尺寸就应该是原始图片的宽高分别加上两倍的BorderW,这样开启的目的是为了不让原始图片变形.
3.在上下文上面添加一个圆形填充路径.位置从0,0点开始,宽高和上下文尺寸一样大.设置颜色为要设置的边框颜色.
4.继续在上下文上面添加一个圆形路径,这个路径为裁剪路径.
它的x,y分别从BorderW这个点开始.宽度和高度分别和原始图片的宽高一样大.
将绘制的这个路径设为裁剪区域.
5.把原始路径绘制到上下文当中.绘制的位置和是裁剪区域的位置相同,x,y分别从border开始绘制.
6.从上下文状态当中取出图片.
7.关闭上下文状态.
 
 
 技术分享
 
3.gif
    加载要裁剪的图片
    UIImage *image = [UIImage imageNamed:@"阿狸头像"];
    0.设置边框大小.
    CGFloat borderW = 10;
    1.开启一个和原始图片一样大小的位图上下文.
    CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 * borderW);
    UIGraphicsBeginImageContextWithOptions(size,NO,0);
    2.绘制一个大圆,填充
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [[UIColor blueColor] set];
    [path fill];
    3.添加一个裁剪区域.
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    [path addClip];
    4.把图片绘制到裁剪区域当中.
    [image drawAtPoint:CGPointMake(borderW, borderW)];
    5.生成一张新图片.
    UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
    6.关闭上下文.
    UIGraphicsEndImageContext();
 
抽取分类方法:
 
根据传入的图片,生成一终带有边框的圆形图片.
borderW边框宽度
borderColor:边框颜色
image:要生成的原始图片.
+ (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image;
 
+ (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image{
    1.开启一个和原始图片一样大小的位图上下文.
    CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 * borderW);
    UIGraphicsBeginImageContextWithOptions(size,NO,0);
    2.绘制一个大圆,填充
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [[UIColor blueColor] set];
    [path fill];
    3.添加一个裁剪区域.
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    [path addClip];
    4.把图片绘制到裁剪区域当中.
    [image drawAtPoint:CGPointMake(borderW, borderW)];
    5.生成一张新图片.
    UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
    6.关闭上下文.
    UIGraphicsEndImageContext();
   
    return clipImage;
   
}
 
 
 
 
 

iOS之带有边框的圆形图片裁剪

标签:

原文地址:http://www.cnblogs.com/chenjianjian/p/5377831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!