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

具体实现思路:

  • 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.开启一个和原始图片一样大小的位图上下文.
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;```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Quartz2D以及drawRect的重绘机制字数1487 阅读21 评论1 喜欢1一、什么是Quartz2D Q...
    PurpleWind阅读 828评论 0 3
  • 1.圆形图片裁剪 目标明确: 得到一张图片 (=> 位图上下文,手动开启和关闭,代码位置任意)思路:先设置好位图上...
    夏天不冷阅读 834评论 0 1
  • 展示效果: 请问:实现的步骤是什么? 第一步,需求:需要把一张普通的图片可以裁剪成圆形显示,.请问:图片裁减的思路...
    青葱烈马阅读 1,437评论 0 6
  • 本学期“专心高效”2班最后一节课在今天完结,第30次课还真是一波三折。一个都不能少,因为孩子们对最后一节课充满期待...
    拉比教育刘芳阅读 326评论 1 0
  • 今天我来给大家介绍一家很奇葩的家庭。在这个家庭里,老公不是老公是爸爸。女儿不是女儿是管家。儿子你不是儿子是孙子。老...
    一切都那么美好阅读 397评论 0 5