美文网首页
视图绘制

视图绘制

作者: 一只长毛猫 | 来源:发表于2018-04-24 17:01 被阅读7次

    本文要点

    事件传递
    视图响应
    图像显示原理
    卡顿掉帧原因
    绘制&异步绘制
    离屏渲染

    先看一下UIView和CALayer区别?
    UIView负责事件传递和视图响应。CALayer负责视图显示工作。这种分工体现单一职责原则。

    事件传递

    pointInside 判断点击位置在不在视图内,hitTest 返回点击位置的地方的hitView. 递归倒序遍历子视图



    1 两个重要的API,

    -(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event
    {
      f (!self.userInteractionEnabled ||
            [self isHidden] ||
            self.alpha <= 0.01) {
            return nil;
        }
        if ([self pointInside:point withEvent:event]) {
               ……
        }else{
            return nil;
        }
        ……
    }
    -(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event //
    

    2 采用的是递归倒序遍历

    视图响应

    1 响应API

    touchesBegan
    touchesMoved
    touchesEnded
    

    2 响应链条
    UIButton ---> UIView--->UIController--->UIWindow--->UIApplication
    中途有任何一个视图响应,则响应结束。若果UIApplication也没有响应,则此次事件将被忽略。

    图像显示原理

    CPU工作:
    layout UI布局,文字计算。
    display: 绘制。
    prepare: 图片编解码。
    Commit : 提交位图。
    GPU工作:图层合成,纹理渲染。
    CPU生成位图,交给GPU,GPU整合后生成Frame Buffer,下次VSync到来时,显示到屏幕上。

    卡顿掉帧原因

    在16.7ms内,在下一帧VSync信号到来之前,并没有CPU和GPU共同完成下一个画面的合成,导致卡顿掉帧。


    UI绘制原理&异步绘制

    UIView调用setNeedsDisplay并没有立即开始绘制,而是在当前RunLoop将要结束的时候调用[CALayer display]。




    异步绘制流程: [UIView setNeedsDispplay]后,会在当次RunLoop结束之前调用[CALayer display]方法,CALayer的代理是否实现了displayLayer方法,走异步绘制流程,在子线程中创建位图,完成之后回到主线线程。 若是CALayer没有实现displayLayer方法,走系统绘制流程。

    UI离屏渲染

    On-Screen Renderinng
    当前屏幕渲染,GPU渲染操作发生在当前屏幕显示的缓冲区中进行
    Off-Screen Rendering
    离屏渲染:GPU在当前屏幕缓冲区之外,新开辟一个缓冲区进行渲染操作

    什么事离屏渲染?

    当我们指定了UI视图的某些属性,标记为它在未预合成之前,不能用于当前屏幕直接显示的时候,就会触发离屏渲染。而离屏幕渲染的概念起源于GPU层面,在当前屏幕缓冲区之外,新开辟一个缓冲区进行渲染操作。

    何时触发?

    圆角(maskToBounds为YES)
    图层蒙版
    阴影设置
    光栅化

    为何要避免?

    在触发离屏渲染的时候,会增加GPU的工作量。而增加GPU工作量,可能导致CPU和GPU的总耗时超出了16.7ms,造成UI卡顿和掉帧。所以需要避免离屏渲染。(高级)
    创建新的缓冲区,多通道渲染管线,上下文切换,造成额外开销。(普通)

    相关文章

      网友评论

          本文标题:视图绘制

          本文链接:https://www.haomeiwen.com/subject/ikrjlftx.html