本文是
IOS Quart2D绘图之UIGraphicsGetCurrentContext基础的续集
主要是看看图形上下文
如果你看到了这里
内容不多，包括
- 水印：给图片添加水印（文字和图片水印）
- 裁剪：裁剪圆形图片（带边框或者不带）
- 截屏：截取当前屏幕
- 擦除：这个不知道怎么描述....
不知怎么描述擦除
OK，为了方便使用，我都写在Image的分类中了，拿出来就可以使用！
1、图形上下文：主要是对图片进行处理，操作步骤基本如下，可在 2 之前或者之后对上下文进行处理
- 1 开启一个图形上下文
- 2 绘制图片
- 3 从当前上下文获取新的图片
- 4 关闭上下文
+ (UIImage *)pq_drawImageWithImageNamed:(NSString *)name{
//1.获取图片
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:name ofType:nil]];
//2.开启图形上下文
UIGraphicsBeginImageContext(image.size);
//3.绘制到图形上下文中
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
//4.从上下文中获取图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.关闭图形上下文
UIGraphicsEndImageContext();
//返回图片
return newImage;
}
3.png
.
2、给图片添加文字水印：
- 1 开启一个图形上下文
- 2 绘制图片
- 3 把文字绘制到当前上下文
- 4 从当前上下文获取新的图片
- 5 关闭上下文
+ (UIImage *)pq_WaterImageWithImage:(UIImage *)image text:(NSString *)text textPoint:(CGPoint)point attributedString:(NSDictionary * )attributed{
//1.开启上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//2.绘制图片
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
//添加水印文字
[text drawAtPoint:point withAttributes:attributed];
//3.从上下文中获取新图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//4.关闭图形上下文
UIGraphicsEndImageContext();
//返回图片
return newImage;
}
4.png
3、给图片添加图片水印：
- 1 开启一个图形上下文
- 2 绘制图片
- 3 把水印图片绘制到当前上下文
- 4 从当前上下文获取新的图片
- 5 关闭上下文
+ (UIImage *)pq_WaterImageWithImage:(UIImage *)image waterImage:(UIImage *)waterImage waterImageRect:(CGRect)rect{
//1.获取图片
//2.开启上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//3.绘制背景图片
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
//绘制水印图片到当前上下文
[waterImage drawInRect:rect];
//4.从上下文中获取新图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.关闭图形上下文
UIGraphicsEndImageContext();
//返回图片
return newImage;
}
5.png
4、裁剪圆形图片：
- 1 开启一个图形上下文
- 2 设置裁剪区域
- 3 把图片绘制到当前上下文
- 4 从当前上下文获取新的图片
- 5 关闭上下文
+ (nullable UIImage *)pq_ClipCircleImageWithImage:(nullable UIImage *)image circleRect:(CGRect)rect{
//1、开启上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//2、设置裁剪区域
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:rect];
[path addClip];
//3、绘制图片
[image drawAtPoint:CGPointZero];
//4、获取新图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//5、关闭上下文
UIGraphicsEndImageContext();
//6、返回新图片
return newImage;
}
6.png
5、裁剪带边框的圆形图片：
- 1 开启一个图形上下文
- 2 设置边框
- 3 设置裁剪区域
- 4 把图片绘制到当前上下文
- 5 从当前上下文获取新的图片
- 6 关闭上下文
+ (nullable UIImage *)pq_ClipCircleImageWithImage:(nullable UIImage *)image circleRect:(CGRect)rect borderWidth:(CGFloat)borderW borderColor:(nullable UIColor *)borderColor{
//1、开启上下文
UIGraphicsBeginImageContext(image.size);
//2、设置边框
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:rect];
[borderColor setFill];
[path fill];
//3、设置裁剪区域
UIBezierPath * clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(rect.origin.x + borderW , rect.origin.x + borderW , rect.size.width - borderW * 2, rect.size.height - borderW *2)];
[clipPath addClip];
//3、绘制图片
[image drawAtPoint:CGPointZero];
//4、获取新图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//5、关闭上下文
UIGraphicsEndImageContext();
//6、返回新图片
return newImage;
}
7.png
6、截屏：
- 1 开启一个图形上下文
- 2 获取当前上下文
- 3 截屏，渲染到当前上下文中，这里使用绘制无效，可自行测试
- 4 从当前上下文获取新的图片
- 5 把图片转化成为NSData类型
- 6 关闭上下文
- 7 把新的图片和NSData类型直接放回，便于显示和保存截屏
+ (void)pq_cutScreenWithView:(nullable UIView *)view successBlock:(nullable void(^)(UIImage * _Nullable image,NSData * _Nullable imagedata))block{
//1、开启上下文
UIGraphicsBeginImageContext(view.bounds.size);
//2.获取当前上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//3.截屏
[view.layer renderInContext:ctx];
//4、获取新图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.转化成为Data
//compressionQuality:表示压缩比 0 - 1的取值范围
NSData * data = UIImageJPEGRepresentation(newImage, 1);
//6、关闭上下文
UIGraphicsEndImageContext();
//7.回调
block(newImage,data);
}
8.png
9.png
7、擦除：
10.png
-
1 计算当前擦除区域的大小位置：
11.png
- 2 开启上下文
- 3 获取当前上下文
- 4 把图片绘制到当前上下文
- 5 裁剪出透明区域
- 6 得到当前上下文的图片
- 7 关闭上下文
- 8 把图片设置给前景ImageView
- (void)wipePanGestureEvent:(UIPanGestureRecognizer * )pan{
//计算位置
CGPoint nowPoint = [pan locationInView:self.wipeImageV];
CGFloat offsetX = nowPoint.x - 10;
CGFloat offsetY = nowPoint.y - 10;
CGRect clipRect = CGRectMake(offsetX, offsetY, 20, 20);
//开启上下文
UIGraphicsBeginImageContextWithOptions(self.wipeImageV.bounds.size, NO, 1);
//获取当前的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//把图片绘制上去
[self.wipeImageV.layer renderInContext:ctx];
//把这一块设置为透明
CGContextClearRect(ctx, clipRect);
//获取新的图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//关闭上下文
UIGraphicsEndImageContext();
//重新赋值图片
self.wipeImageV.image = newImage;
}
为了代码能复用，作者再次把这个代码封装到了Image类别中：
- (nullable UIImage *)pq_wipeImageWithView:(nullable UIView *)view currentPoint:(CGPoint)nowPoint size:(CGSize)size{
//计算位置
CGFloat offsetX = nowPoint.x - size.width * 0.5;
CGFloat offsetY = nowPoint.y - size.height * 0.5;
CGRect clipRect = CGRectMake(offsetX, offsetY, size.width, size.height);
//开启上下文
UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 1);
//获取当前的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//把图片绘制上去
[view.layer renderInContext:ctx];
//把这一块设置为透明
CGContextClearRect(ctx, clipRect);
//获取新的图片
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//关闭上下文
UIGraphicsEndImageContext();
//重新赋值图片
return newImage;
}
外面直接调用
//封装后如下
self.wipeImageV.image = [self.wipeImageV.image pq_wipeImageWithView:self.wipeImageV currentPoint:[pan locationInView:self.wipeImageV] size:CGSizeMake(20, 20)];
效果图如下：
没擦除之前：
擦除之前
擦除之后：
擦除之后
效果图
8、图片裁剪：
之前都是固定区域、固定形状的裁剪，现在我们做一个自己选择大小，范围的裁剪。
- 走一遍思想（个人想法，如果你有更好的，欢迎指正）：
思路
然后因为这个区域是自己控制大小的！
所以要建立一个View
移动：思路就是获取当前的点加上偏移量
图片
实现方法有两种，一种是添加Pan事件，一种直接重写touches系列方法
我采用后者。
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch * touch = [touches anyObject];
//得到按下去的点
_startP = [touch locationInView:self];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch * touch = [touches anyObject];
CGPoint curP = [touch locationInView:self];
//计算偏移量
CGFloat x = curP.x - _startP.x;
CGFloat y = curP.y - _startP.y;
//限制范围 不允许超出屏幕
self.x += x;
if (self.x <=0) {
self.x = 0;
}
self.y += y;
if (self.y <= 0) {
self.y = 0;
}
//范围判断
[self ifOut];
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
}
大小变换：
大小
- (IBAction)sizePan:(UIPanGestureRecognizer *)sender {
switch (sender.state) {
case UIGestureRecognizerStateBegan:
_sizeStartP = [sender locationInView:self];
oldSize = self.size;
break;
case UIGestureRecognizerStateChanged:
{
CGPoint curP = [sender locationInView:self ];
CGFloat w = curP.x - _sizeStartP.x;
CGFloat h = curP.y - _sizeStartP.y;
self.width = oldSize.width + w;
self.height = oldSize.height + h;
[self ifOut];
}
break;
default:
break;
}
}
剪切过程：
裁剪过程
+ (void)pq_cutScreenWithView:(nullable UIView *)view cutFrame:(CGRect)frame successBlock:(nullable void(^)(UIImage * _Nullable image,NSData * _Nullable imagedata))block{
//先把裁剪区域上面显示的层隐藏掉
for (PQWipeView * wipe in view.subviews) {
[wipe setHidden:YES];
}
// ************************ 进行第一次裁剪 ********************
//1.开启上下文
UIGraphicsBeginImageContext(view.frame.size);
//2、获取当前的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//3、添加裁剪区域
UIBezierPath * path = [UIBezierPath bezierPathWithRect:frame];
[path addClip];
//4、渲染
[view.layer renderInContext:ctx];
//5、从上下文中获取
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//7、关闭上下文
UIGraphicsEndImageContext();
//8、进行完第一次裁剪之后，我们就已经拿到了没有半透明层的图片，这个时候可以恢复显示
for (PQWipeView * wipe in view.subviews) {
[wipe setHidden:NO];
}
// ************************ 进行第二次裁剪 ********************
//9、开启上下文，这个时候的大小就是我们最终要显示图片的大小
UIGraphicsBeginImageContextWithOptions(frame.size, NO, 0);
//10、这里把x y 坐标向左、上移动
[newImage drawAtPoint:CGPointMake(- frame.origin.x, - frame.origin.y)];
//11、得到要显示区域的图片
UIImage * fImage = UIGraphicsGetImageFromCurrentImageContext();
//12、得到data类型 便于保存
NSData * data2 = UIImageJPEGRepresentation(fImage, 1);
//13、关闭上下文
UIGraphicsEndImageContext();
//14、回调
block(fImage,data2);
}
这里在说说二次裁剪吧：
二次裁剪
效果图：
原始大小：
18.png
改变之后
19.png
点击裁剪：
20.png
裁减之后：
效果图
沙河路径：
终于写完啦！！！！
