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();
}
