1.圆形图片裁剪
目标明确： 得到一张图片 （=> 位图上下文，手动开启和关闭，代码位置任意）
思路：先设置好位图上下文的裁剪路径为圆形，再将图片渲染到位图上下文，取出即可。
步骤：
①开启位图上下文（大小与图片一致）
②将圆形裁剪路径添加到位图上下文
③将图片画到当前位图上下文中去 （注意：对象进入上下文叫“画”Draw；层与层(上下文)之间叫“渲染”：Render）
④从当前位图上下文中取出图片
⑤关闭当前位图上下文
-
(void)viewDidLoad {
[super viewDidLoad];//1.开启一个位图上下文(大小跟图片一样大)
UIImage *image = [UIImage imageNamed:@"阿狸头像"];
UIGraphicsBeginImageContext(image.size);//2.设置圆形裁剪区域(超出裁剪区域以外的内容会自动裁剪掉,对之前已经画上去的东西,不会有做用,有顺序.)
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
[path addClip]; //addClip默认已经添加到当前位图上下文//3.把图片绘制到上下文当中
[image drawAtPoint:CGPointZero];//4.从上下文当中生成一张图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();//5.关闭上下文
UIGraphicsEndImageContext();
self.imageView.image = newImage;
}
2.带有边框的圆形图片裁剪
目标明确： 得到一张图片 （=>位图上下文，手动开启和关闭，代码位置任意）
思路 ：由于裁剪路径对之前上下文中画的内容无效，有顺序。=> 先画目标图片的外切圆，再设置目标图片的内切圆裁剪路径，最后将目标图片画进位图上下文。
步骤：
①开启一个位图上下文（大小 等于 图片宽高各自 + 2*Border）
②绘制目标图片的外切圆到当前位图上下文（设置好边框颜色）
③将目标图片内切圆的裁剪路径添加到当前位图上下文（只作用于后面添加的内容）
④将目标图片绘制到位图上下文中去
⑤从当前位图上下文中获取带边框的圆形图片
⑥关闭位图上下文
-
(UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image
{
//1.开启一个位图上下文(大小,图片的宽高 + 2 * 边框宽度)
CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 *borderW);
UIGraphicsBeginImageContext(size);//2.绘制目标图片外切圆到位图上下文
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
[color set];
[path fill];//3.设置裁剪区域为目标图片内切圆，并添加到位图上下文
UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
[clipPath addClip];//4 把目标图片绘制到上下文
[image drawAtPoint:CGPointMake(borderW, borderW)];//5.从上下文当中获取图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();//6.关闭上下文
UIGraphicsEndImageContext();
return newImage;
}
3.截屏
目标明确： 得到一张图片 （=> 位图上下文，手动开启和关闭，代码位置任意）
思路：把当前控制器View上的Layer层内容，渲染到位图上下文，再从位图上下文当中获取图片。
步骤：
①开启位图上下文（大小与目标View一致）
②把控制器View的Layer层内容渲染到当前开启的位图上下文中去
③从位图上下文当中获取图片
④关闭当前位图上下文
-
(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
//1.创建一个位图上下文
UIGraphicsBeginImageContext(self.view.bounds.size);//2.把控制器的View的layer内容渲染到上下文当中.
CGContextRef ctx = UIGraphicsGetCurrentContext();
[self.view.layer renderInContext:ctx];//3.从上下文当中生成一张图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();//4.关闭上下文
UIGraphicsEndImageContext();//如何把图片转成二进制流?
//NSData *data = UIImageJPEGRepresentation(newImage, 1);
NSData *data = UIImagePNGRepresentation(newImage);
[data writeToFile:@"/Users/xmg1/Desktop/newImage.png" atomically:YES];
}
4.图片任意尺寸截屏
目标明确： 得到一张图片 （=>位图上下文，手动开启和关闭，代码位置任意）
思路：图片与用户交互加Pan(拖拽)手势 + 实时显示我选中区域大小作为裁剪区域 + 将目标图片所在Layer渲染到位图上下文中再取出
步骤：
①设置显示图片的UIImageView控件与用户交互并添加Pan手势
②监听Pan手势开始以及改变的状态，实时记录用户选中图片截屏区域（懒加载一个遮盖UIView，这里UIBezierPath画路径不好使）
③当手势状态停止的时候，开启位图上下文，将遮盖区域设置为裁剪区域添并添加进位图上下文
④将目标图片所在的Layer渲染进位图上下文，然后从位图上下文取出截屏图片（注意：取出的截屏图片尺寸与原图一致）
⑤关闭当前位图上下文
(UIView *)coverV {
if (_coverV == nil) {
//创建遮盖
UIView *coverV = [[UIView alloc] init];
coverV.backgroundColor = [UIColor blackColor];
coverV.alpha = 0.7;
[self.view addSubview:coverV];
_coverV = coverV;
}
return _coverV;
}(void)viewDidLoad {
[super viewDidLoad];
self.imageV.userInteractionEnabled = YES;
}-
(IBAction)pan:(UIPanGestureRecognizer *)pan {
if (pan.state == UIGestureRecognizerStateBegan) {
//获取手指的当前点
self.startP = [pan locationInView:self.imageV];
}else if (pan.state == UIGestureRecognizerStateChanged) {
CGPoint curP = [pan locationInView:self.imageV];
CGFloat Width = curP.x - self.startP.x;
CGFloat height = curP.y - self.startP.y;
CGRect frame = CGRectMake(self.startP.x, self.startP.y, Width, height);
self.coverV.frame = frame;
}else if (pan.state == UIGestureRecognizerStateEnded) {//开启位图上下文 UIGraphicsBeginImageContextWithOptions(self.imageV.bounds.size, NO, [UIScreen mainScreen].scale); //设置遮盖区域为裁剪区域 UIRectClip(self.coverV.frame); //把ImageView的内容给渲染到上下文当中. CGContextRef ctx = UIGraphicsGetCurrentContext(); [self.imageV.layer renderInContext:ctx]; //获取截屏图片（截屏后尺寸未变。） UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); //关闭上下文 UIGraphicsEndImageContext(); self.imageV.image = newImage; //重写Draw方法覆盖原有内容,相当于将图片绘制到imageV的图层上下文中去。 [self.coverV removeFromSuperview]; //性能考虑}
}
@end
5.图片擦除
目标明确： 得到一擦除区域变透明的图片 （=>位图上下文，手动开启和关闭，代码位置任意）
思路：“首先明确，擦除区域总范围是固定的”。准备两张一样的图片上下放置，上面一张有遮盖；将上层图片所在的Layer层内容渲染到位图上下文中，再实时按手指擦除“区域”让位图上下文中的上层图片变透明，最后从位图上下文中取回图片画进存放上层图片的View中
步骤：
①设置上层图片所在View与用户交互并添加Pan(拖拽)手势
（在Pan手势方法里：不分状态，直接就是擦除操作）
②开启位图上下文
③把上层图片Layer中的内容渲染到位图上下文中
④确定手指点击代表的区域大小，比如“宽高各30”，并将手指实时移动的Rect作为位图上下文中擦除区域的Rect
⑤取出位图上下文中的图片，并绘制到上层图片所在View的layer中
⑥关闭位图上下文
(void)viewDidLoad {
[super viewDidLoad];
self.imageView.userInteractionEnabled = YES;
//添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self.imageView addGestureRecognizer:pan];
}-
(void)pan:(UIPanGestureRecognizer *)pan {
//1.开启位图上下文
UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0.0);//2.把上层图片的内容渲染到位图上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
[self.imageView.layer renderInContext:ctx];//3.确定手指点击代表区域大小，并将手指实时移动的Rect作为位图上下文的擦除Rect
CGPoint curP = [pan locationInView:self.imageView];
CGFloat rectWH = 100;
CGFloat x = curP.x - rectWH * 0.5;
CGFloat y = curP.y - rectWH * 0.5;
CGRect rect = CGRectMake(x, y, rectWH, rectWH);
CGContextClearRect(ctx, rect); //擦除本质：变透明//4.将从位图上下文获取的图片绘制到上层图片所在的View中(layer中)
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
self.imageView.image = newImage;//重写Drawrect方法//5.关闭位图上下文
UIGraphicsEndImageContext();
}
