3. CALayer 的代理和绘制

屏幕为什么会卡顿? 通常的我们熟悉的 drawRect: 方法，但是是什么时候调用的? 一个视图是怎么样在手机上显示的? CALayer是怎么样异步绘制? 带着这些问题我们往下研究一下。

一: 视图显示

我们的视图要想显示在手机上，一般的需要通过CPU 和 GPU的处理,IOS屏幕的Vsyn信号的频率是 1/60s,如果在这个时间内还没处理完，就会导致卡顿。

CPU渲染

image

1. Layout: UI的Frame 计算
2. 绘制: display阶段,就是我们通过 Core Graphics来处理
3. prepare: 如果是图片的话，需要进行图片解码
4. commit: 其实通过CoreAnimation提交给OpenGL，layer

GPU渲染

顶点着色、图元装配、片段着色、片段处理 大概有个概念就行，我们主要讨论FrameBuffer 和 光栅化, 因为这涉及到离屏幕渲染 、在屏幕渲染 、图层混合合成

image

• 在屏幕渲染 :表示在当前的屏幕的缓存区内渲染
• 离屏幕渲染 :其实是在未预合成之前 不能在当前屏幕渲染，需要放到当前屏幕缓冲区外缓存；我们可以通过开启 Color Offscreen-Rendered Yellow 来检查。主要是以下事件会导致离屏幕渲染:

   1. 设置圆角 + maskToBounds
   2. 图层蒙版
   3. 阴影、渐变、不透明、抗锯齿(edge antialiasing)
   4. 光栅化: 
      (1.) 将图转换为 用栅格 组成的bitmap，每个格栅对应帧缓冲的一个位置,这样下次如果图片没有改变的话就可以直接复用。
      (2.) 通过 “Color Hits Green and Misses Red”,来检测，绿色表示复用。
      (3.) 通常的我们会选择 有多种层级的视图并且含有透明通道， 可以进行 光栅化,减少渲染时间
      (4.) 开启: layer.shouldRasterize=YES & layer.contentsScale = [UIScreen mainScreen].scale
      
  

二: 绘制

IOS 通过UIView 来处理事件的传递问题，而绘制是通过CALayer来处理，其实就是很好的单一模式,同时的calayer.delegate = uiview。在UIView 和 CALayer 的原码方面我主要是参考Chameleon

1. CALayer 绘制过程

CALayer 通过 -(void)display 方法来进行绘制，这个时候会判断delegate 是否实现了-(void)displayLayer:,如果实现了就进行自定义绘制流程，反之则进行 CALayer系统的绘制来自定义创建buffer 和 context，创建好了，就判断是否有代理实现了 drawLayer:inContext: 这样可以把context 传递过去。

image

2. 异步绘制

就是通过 实现 CAlayer代理的 -(void)displayLayer:，自己创建 buffer 和 context ，绘制结束后，通过commit的时候进行提交给GPU处理。

一般的有下面
// 创建 context 和 进行绘制， 一般是放在子线程处理
CGBitmapContextCreate()
....CoreGraphic API 
id content =  CGBitmapContextCreateImage()

//进行提交操作，需要回到主线程进行处理
[CALayer setContents:] 

3. Chameleon源码,查看UIView

通过查看Chameleon, UIView实现了 drawLayer:inContext: 方法.可以清楚的看到 通过创建好的

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
            UIGraphicsPushContext(ctx);
            UIGraphicsPushContext(ctx);
            const CGRect bounds = CGContextGetClipBoundingBox(ctx);
            [self.backgroundColor setFill]; //背景色的设置
            CGContextFillRect(ctx,bounds);
            
            '[self drawRect:bounds];'  //添加自定义的绘制
            
            CGContextRestoreGState(ctx);
            UIGraphicsPopContext();
    }