美文网首页
视图绘制

视图绘制

作者: 一只长毛猫 | 来源:发表于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卡顿和掉帧。所以需要避免离屏渲染。(高级)
创建新的缓冲区,多通道渲染管线,上下文切换,造成额外开销。(普通)

相关文章

  • 常见面试问题概括

    UI视图相关 *TableView重用机制? 答: *视图绘制原理?如何实现异步绘制? 答:UIView绘制原理 ...

  • Android-自定义View

    [1] Android如何绘制视图? 当用户将Android视图引入焦点时,Android框架会引导视图进行绘制。...

  • OpenGL ES(GLKView+GLKViewControl

    GLKView使用OpenGL ES绘制内容的视图默认实现 1:初始化视图 context 绘制视图内容时使⽤用的...

  • Android单排上王者系列之Android性能优化

    Android视图的绘制流程 Android中视图的绘制会经历三个阶段即onMeasure()、onLayout(...

  • 视图绘制

    本文要点 事件传递视图响应图像显示原理卡顿掉帧原因绘制&异步绘制离屏渲染 先看一下UIView和CALayer区别...

  • 绘制视图

    一直没有一个好的绘制视图的笔记,今天整理一下,分享给大家:不多说,直接上代码。 一、核心绘图(C语言风格调用函数)...

  • 绘制视图

    当我们想要重绘某个视图的时候,我们不能直接调用drawRect:的方法,因为该方法为系统自动调用,我们手动调用无效...

  • 视图绘制

    视图绘制是调用drawRect:方法来实现的。对于AppKit中的各种界面控件,系统默认实现了不同控件的界面绘制和...

  • # UI视图相关

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

  • Metal 基本任务和概念 - 02

    使用金属绘制视图内容 创建一个MetalKit视图和一个渲染过程以绘制视图的内容。 概述 在此示例中,您将学习使用...

网友评论

      本文标题:视图绘制

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