iOS 13：抽屉效果、Quartz2D、图形绘制实例

抽屉效果

• 实现抽屉效果，尽量不要使用touchMoved:，因为touchMoved:不能添加到UITableView中，故尽量使用手势pan。
• 经过验证，上下滑动实现UITableView表格cell的上下滑动。当pan手势有一定角度时候，会触发抽屉效果。
• KVO

    // 利用KVO时刻监听mainV的frame属性
    // Observer:观察者 谁想监听
    // KeyPath：监听的属性
    // options:监听新值的改变
    [_mainV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];

• 设计原理：如果A控制器的view成为B控制View的子控件，注意A控制器一定要成为B控制器的子控制器。使用addChildViewController:。

Quartz2D

• 是一个二维绘图引擎，MAC OSX 与 iOS 都能通用
• Quartz2D的API是纯C语言的
• 图形上下文，类似于画板 - 内存缓存

图片 1.png

• 图形上下文（Graphics Context）：是一个CGContextRef类型的数据。只能获取引用，不能够重新实例化。

// 绘图的步骤： 1.获取上下文 2.创建路径（描述路径） 3.把路径添加到上下文 4.渲染上下文
// 通常在这个方法里面绘制图形
// 为什么要再drawRect里面绘图，只有在这个方法里面才能获取到跟View的layer相关联的图形上下文
// 什么时候调用:当这个View要显示的时候才会调用drawRect绘制图形，
// 注意：rect是当前控件的bounds
- (void)drawRect:(CGRect)rect {
    // 如何绘制曲线
    // 原生绘制方法
    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 描述路径
    // 设置起点
    CGContextMoveToPoint(ctx, 50, 50);
    // cpx:控制点的x
    CGContextAddQuadCurveToPoint(ctx, 150, 20, 250, 50);
    // 渲染上下文
    CGContextStrokePath(ctx);
}

• 什么时候调用drawRect:只有需要显示的时候才会调用，调用顺序如下：

  • viewDidLoad:
  • viewWillAppear:
  • drawRect:
  • viewDidAppear:

• drawRect:不能手动调用，因为图形上下文创建不了，只能由系统帮我们创建，并且传递给我们。系统调用drawRect:步骤：

  • 1.创建上下文
  • 2.调用drawRect:
  • 3.传递上下文给drawRect:

• 但是在其他方法中可以调用：[self setNeedsDisplay]或者setNeedsDisplayInRect:，此函数是等屏幕刷新的时候调用drawRect:

• View之所以能显示东西，完全是因为它内部的layer。View内部有个layer（图层）属性，drawRect:方法中取得的是一个Layer Graphics Context，因此，绘制的东西其实是绘制到view的layer上去了

项目：基本图形绘制

• 绘制方法3种

  • 1.C语言底层绘制
    • 获取图形上下文
    • 描述路径：添加路径，并设置路径属性、状态
    • 将路径添加至上下文中
    • 渲染上下文
  • 2.C语言快速绘制
    • 获取上下文
    • 直接使用简便函数描述路径，省去了将路径添加至上下文中，但是底层调用第1种方法。
    • 渲染上下文
  • 3.objc封装绘制 贝瑟尔路径
    • 创建贝瑟尔路径
    • 描述路径
    • 渲染路径

• 绘制曲线
  http://donbe.blog.163.com/blog/static/138048021201052093633776/

2313724308561861661.gif

• 贝瑟尔路径绘制方式：
  • 1.stroke 描边，如果有宽度，内部则为空心
  • 2.fill 对于一个封闭的图形，绘制一个实心
  • 3.closePath，连接首尾，成为一个封闭图形

项目：画饼图、柱状图

• rgb颜色，正常情况下取值是： 0 ~ 255，但是在objc中取值是：0 ~ 1
• 注意：一般的图形都会有封装好的框架，不需要自己手动从0使用Quartz2D 进行绘制。

项目：绘制文字和图片

• 在UIKit framework的第一个文件 NSAttributedStrings.h，包含了富文本属性。UILable具有attributedText属性，创建富文本字符串并赋予给attributeText，可以设置文字状态。
• [UILable * , sizeToFit]，只能计算普通文本。
• drawAtPoint 不会换行，drawAtRect，在这个设置的Rect中可以换行。
• UIRectClip 裁剪显示区域Rect，渲染的路径就放在裁剪的Rect中。
• 图片本身也有尺寸，比如属性：image.size.width。
• 绘制图形如下：

- (void)drawRect:(CGRect)rect {
    // 超出裁剪区域的内容全部裁剪掉
    // 注意：裁剪必须放在绘制之前
    UIRectClip(CGRectMake(0, 0, 50, 50));
    
    UIImage *image = [UIImage imageNamed:@"001"];
    
    // 默认绘制的内容尺寸跟图片尺寸一样大
//    [image drawAtPoint:CGPointZero];
//    [image drawInRect:rect];
    // 绘图
    [image drawAsPatternInRect:rect];

项目：定时器（雪花）

• 使用定时器每隔一段时间更新雪花的位置
• 使用NSTimer，流畅性不好，因为调用优先级不高，并不会准时调用，手机CPU空闲时调度。故很少用于绘图。
• 使用CADisplayLink，将其添加至主运行循环中，addToRunLoop:。每次屏幕刷新的时候调用，屏幕一般1S中刷新60次。
• [self setNeedsDisplay];注意：这个方法并不会马上调用drawRect,其实这个方法只是给当前控件添加刷新的标记，等下一次屏幕刷新的时候才会调用drawRect。

项目：图形上下文状态栈、图形上下文矩阵操作

• 图形上下文的路径的部分状态，是一个栈，设置一次，共同享有。有时需要一开始保存好最纯净的路径状态，当再次使用时候restore还原。
• 贝瑟尔路径的状态，属于路径单独拥有的。
• 路径之间的相互转化

    // 把路径添加到上下文
    // .CGPath 可以UIkit的路径转换成CoreGraphics路径
    CGContextAddPath(ctx, path.CGPath);

• 图形上下文，相当于内存缓冲区。
• 矩阵操作：平移、缩放、旋转
• 注意：矩阵操作必须要在添加路径之前。