- Quartz2D 是一个二维绘图引擎
图形上下文
- 图形上下文（Graphics Context）: 是一个
CGContextRef类型的数据 - 作用：
- 保存绘图信息绘图状态
-
决定绘制的输出目标（绘制到什么地方去？）
image.png
Quartz2D 绘图的代码步骤
1.获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();2.拼接路径
CGContextMoveToPoint(ctx,10,10);
CGContextAddLineToPoint(ctx,100,100);
- 3.绘制路径
CGContextStrokePath(ctx)
常用的拼接路径函数
新建一个起点
void CGContextMoveToPoint(CGContextRef c，CGFloat x, CGFloat y)添加新的线段到某个点
void CGContextAddLineToPoint(CGContextRef c, CGFloat x,CGFloat y)添加一个矩形
void CGContextAddRect(CGContextRef c,CGRect rect)添加一个椭圆
void CGContextAddEllipseInRect(CGContextRef context,CGRext rect)添加一个圆弧
void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)Mode参数决定绘制的模式
void CGContextDrawPath(CGContextRef c,CGPathDrawinMode mode)绘制空心路径
void CGContextStrokePath(CGContextRef c)绘制实心路径
void CGContextFillPah(CGContextRef c)
图形上下文栈的操作
- 将当前的上下文copy一份，保存到栈顶
void CGContextSaveGState(CGContextRef c) - 将栈顶的上下文出栈，替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)
矩阵操作
-
利用矩阵操作，能让绘制到上下文中的所有路径一起发生变化
- 缩放
void CGContextScaleCTM(CGContextRef c,CGFloat sx ,CGFloat sy) - 旋转
void CGContextRotateCTM(CGContextRef c,CGFloat angle) - 平移
void CGContextTranslateCTM(CGContextRef c,CGFloat tx ,CGFloat ty)
- 缩放
-
自定义view的基本步骤
- 获取图形上下文
- 创建（描绘）路径
- 把路径添加到上下文
- 渲染上下文
- (Void) drawRect:(CGRect)rect {
// 1.获取图形上下文
// 目前我们所用的上下文都是以UIGraphics
// CGContextRef Ref：引用 CG:目前使用到的类型和函数 一般都是CG开头 CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路径
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 设置起点
// path：给哪个路径设置起点
CGPathMoveToPoint(path, NULL, 50, 50);
// 添加一根线到某个点
CGPathAddLineToPoint(path, NULL, 200, 200);
// 3.把路径添加到上下文
CGContextAddPath(ctx, path);
// 4.渲染上下文
CGContextStrokePath(ctx);
}
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [UIBezierPath bezierPath];
// 设置起点
[path moveToPoint:CGPointMake(50, 50)];
// 添加一根线到某个点
[path addLineToPoint:CGPointMake(200, 200)];
// 绘制路径
[path stroke];
}
- 为什么要实现drawRect：方法才能绘图到view上？
- 因为在drawRect：方法中才能获取到跟view相关联的图形上下文
- drawRect:方法什么时候调用？
- 当view第一次显示到屏幕上的时（被加到UIWindow上显示出来）
- 调用view的setNeedsDisplay或者setNeedsDisplayInrect时
绘制图片和文字
-
drawInRect:withAttributes和drawAtPoint:withAttributes的区别 -
drawInRect:withAttributes可以换行
NSString *str = @"An empty implementation adversely affects performance during animation.";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor redColor];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:19];
// 不会换行
[str drawAtPoint:CGPointZero withAttributes:nil];
// 可以换行
[str drawInRect:rect withAttributes:dict];
-
drawAtPoint:默认绘制的内容和图片的尺寸大小一样 drawInRect-
drawAsPatternInRect绘制图片 平铺
定时器
- NSTimer很少用于绘图，因为调度优先级比较低，并不会准时调用，通常使用
CADisplayLink -
setNeedsDisplay这个方法并不会马上调用drawRect,其实这个方法只是给当前控件添加刷新的标记，等下一次屏幕刷新的时候才会调用drawRect
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeChange)];
// 添加主运行循环
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
矩阵方法
- (void)drawRect:(CGRect)rect {
// 1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-100, -50, 200, 100)];
[[UIColor redColor] set];
// 上下文矩阵操作
// 注意:矩阵操作必须要在添加路径之前
// 平移
CGContextTranslateCTM(ctx, 100, 50);
// 缩放
CGContextScaleCTM(ctx, 0.5, 0.5);
// 旋转
CGContextRotateCTM(ctx, M_PI_4);
// 3.把路径添加上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor redColor] set];
// 4.渲染上下文
CGContextFillPath(ctx);
}
图片水印
- 开启一个基于位图的图形上下文
void UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque ,CGFloat scale)- size: 大小
- opaque： 不透明度 （NO为透明，一般弄透明的上下文 ）
- scale: 缩放，通常不需要缩放上下文，取值为0 ,表示不缩放
- 从上下文中获取图片
UIImage * UIGraphicsGetImageFromCurrentImageContext() - 结束基于位图的图形上下文
void UIGraphicsEndImageContext()
- （Void）waterImage {
// 加载图片
UIImage *image = [UIImage imageNamed:@"nihao"];
// 0.获取上下文，之前的上下文都是在view的drawRect方法中获取（跟View相关联的上下文layer上下文）
// 目前我们需要绘制图片到新的图片上，因此需要用到位图上下文
// 怎么获取位图上下文,注意位图上下文的获取方式跟layer上下文不一样。位图上下文需要我们手动创建。
// 开启一个位图上下文，注意位图上下文跟view无关联，所以不需要在drawRect.
// size:位图上下文的尺寸（新图片的尺寸）
// opaque: 不透明度 YES：不透明 NO:透明，通常我们一般都弄透明的上下文
// scale:通常不需要缩放上下文，取值为0，表示不缩放
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
// 1.绘制原生的图片
[image drawAtPoint:CGPointZero];
// 2.给原生的图片添加文字
NSString *str = @"我是水印";
[str drawAtPoint:CGPointMake(200, 528) withAttributes:nil];
// 3.生成一张图片给我们,从上下文中获取图片
UIImage *imageWater = UIGraphicsGetImageFromCurrentImageContext();
// 4.关闭上下文
UIGraphicsEndImageContext();
_imageView.image = imageWater;
}
图片剪裁
- 将当前上下文所绘制的路径都剪裁出来（超出这个剪裁区域的都不能显示）
void CGContextClip(CGContextRef c) - 步骤
- 开启位图上下文
- 设置原型裁剪区域
- 绘制图片
- 从上下文中获取图片
- 关闭上下文
- (void)clipImage
{
// 0.加载图片
UIImage *image = [UIImage imageNamed:@"阿狸头像"];
// 1.开启位图上下文，跟图片尺寸一样大
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
// 2.设置圆形裁剪区域，正切与图片
// 2.1创建圆形的路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
// 2.2把路径设置为裁剪区域
[path addClip];
// 3.绘制图片
[image drawAtPoint:CGPointZero];
// 4.从上下文中获取图片
UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
// 5.关闭上下文
UIGraphicsEndImageContext();
_imageView.image = clipImage;
}
屏幕截图
- 图片转化成NSData
UIImageJPEGRepresentation - 将图片保存到指定文件
[data writeToFile:@"/Users/xxx//Desktop/close.png" atomically:YES]
+ (UIImage *)imageWithCaputureView:(UIView *)view
{
// 开启位图上下文
UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 0);
// 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 把控件上的图层渲染到上下文,layer只能渲染
[view.layer renderInContext:ctx];
// 生成一张图片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// 关闭上下文
UIGraphicsEndImageContext();
return image;
}
图片截屏
-
pan手势拖拽
- (void)setuiPan {
// 给控制器的view添加一个pan手势 拖拽
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self.view addGestureRecognizer:pan];
}
- (void)pan:(UIPanGestureRecognizer *)pan {
// 获取偏移量
// 返回的是相对于最原始的手指的偏移量
CGPoint transP = [pan translationInView:self.imageV];
// 移动图控件
self.imageV.transform = CGAffineTransformTranslate(self.imageV.transform, transP.x, transP.y);
// 复位
[pan setTranslation:CGPointZero inView:self.view];
}
- 屏幕截图
- 在一个背景image上移动半透明的view，形成截屏的view
- （void）setupPan {
UIPanGestureRecongnizer *pan = [UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
}
- (void)pan:(UIPanGestureRecognizer *)pan
{
CGPoint endA = CGPointZero;
if (pan.state == UIGestureRecognizerStateBegan) { // 一开始拖动的时候
// 获取一开始触摸点
_startP = [pan locationInView:self.view];
}else if(pan.state == UIGestureRecognizerStateChanged){ // 一直拖动
// 获取结束点
endA = [pan locationInView:self.view];
CGFloat w = endA.x - _startP.x;
CGFloat h = endA.y - _startP.y;
// 获取截取范围
CGRect clipRect = CGRectMake(_startP.x, _startP.y, w, h);
// 生成截屏的view
self.clipView.frame = clipRect;
}else if (pan.state == UIGestureRecognizerStateEnded){
// 图片裁剪，生成一张新的图片
// 开启上下文
// 如果不透明，默认超出裁剪区域会变成黑色，通常都是透明
UIGraphicsBeginImageContextWithOptions(_imageV.bounds.size, NO, 0);
// 设置裁剪区域
UIBezierPath *path = [UIBezierPath bezierPathWithRect:_clipView.frame];
[path addClip];
// 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 把控件上的内容渲染到上下文
[_imageV.layer renderInContext:ctx];
// 生成一张新的图片
_imageV.image = UIGraphicsGetImageFromCurrentImageContext();
// 关闭上下文
UIGraphicsEndImageContext();
// 先移除
[_clipView removeFromSuperview];
// 截取的view设置为nil
_clipView = nil;
}
// 获取手指的偏移量
// pan translationInView:<#(UIView *)#>
}