Flutter图像绘制原理深入分析-阿里云开发者社区

开发者社区> 早起的年轻人> 正文

Flutter图像绘制原理深入分析

简介: 本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程
+关注继续查看

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

column1 column2
CSDN 网易云课堂教程
掘金 EDU学院教程
知乎 Flutter系列文章

本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程


1 图形绘制原理

在这里插入图片描述

显示器(屏幕)是由一个个物理显示单元(像素点)组成,而每一个像素点可以发出多种颜色,显示器成相的原理就是在不同的物理像素点上显示不同的颜色,最终构成完整的图像。

图形计算和绘制都是由相应的硬件来完成,操作系统一般封装了这些底层硬件操作指令,提供一些封装后的API以供操作系统之上的应用层调用。

然后再将操作系统原生API封装在一个编程框架和模型中,然后定义一种简单的开发规则来开发GUI应用程序,而这一层抽象,就是所谓的 UI 系统。

如Android SDK封装了Android操作系统API,提供了 UI描述文件XML+Java操作DOM的UI系统,而iOS提供了UIKit 系列对View的抽象操作。

1.1 CPU、GPU和显示器协作原理

CPU 全称 central processing unit 是计算机系统的运算和控制核心,是信息处理、程序运行的最终执行单元

GPU 全称 Graphics Processing Unit 是图形处理器,是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上做图像和图形相关运算工作的微处理器

图形处理器一般由三部分组件:
1、显示主芯片显卡的核心,俗称GPU,它的主要任务是对系统输入的图像信息进行构建和渲染。

2、显示缓冲存储器用来存储将要显示的图形信息以及保存图形运算的中间数据。
3、RAMD/A转换器把二进制的数字转换成为和显示器相适应的模拟信号。

从最初诞生的计算机系统系统来讲,CPU、GPU和显示器以一种特定的方式协作:CPU将计算好的显示内容提交给 GPU,GPU渲染后放入帧缓冲区,它们是图像生产者,往帧缓冲区(BufferQueue) 不断填充数据, 显示器可以理解为消费者,然后以固定的频率从帧缓冲区取帧数据(BufferQueue), 然后把渲染后的内容呈现到屏幕上,比如有个屏幕的刷新频率是 60Hz,也就是1秒内会去取60次数据。

显示器是以固定的频率刷新(从GPU取数据),是通过垂直同步信号(如VSync),60Hz的屏幕就会一秒内发出 60次这样的信号, 这个信号是用来同步 CPU、GPU 和显示器的工作的,即提示 CPU 和 GPU 进行下一帧工作的信号。

到后来移动设备的洗礼世界,每部手机类似一个小的计算机系统, Android系统每隔16.6ms发出VSYNC信号,来通知界面进行输入、动画、绘制等动作。

1.2 Vsync 机制

现在的显卡通常可以将CS的帧率渲染到120以上,即120FPS,FPS代表了GPU在一秒内绘制操作的帧数,120FPS代表1秒内绘制120帧,通常使用的显示器只能达到60HZ的刷新率,像这种情况,显卡在1秒内将画面变化了120次,但显示器只有展示其中60帧的能力,显然会丢掉一半的帧数,这种现象是图像的生产能力超出了显示能力,供过于求。

反之,显卡在1秒内将画面变化60次,但显示器有展示120帧的能力,这种就是供不应求,供不应求的情况下,容易产生卡顿的现象。

通过Vsync 机制可以很好的协调上述两种供过于求与供不应求的情况,Vsync 机制可以理解为是显卡与显示器的通信桥梁,显卡在渲染每一帧之前会等待垂直同步信号,只有显示器完成了一次刷新时,发出垂直同步信号,显卡才会渲染下一帧,确保刷新率和帧率保持同步,以达到供需平衡的效果,防止卡顿现象。

2 跨平台开发的 React Native

如下图所示为React Native的技术架构图,ReactJS,自身是不直接绘制UI的,而是调用原生组件执行页面渲染操作,Bridges是一个桥梁,是用来绘制指令给原生组件进行绘制的。
在这里插入图片描述

3 跨平台开发的 Flutter

与 React Native 使用原生组件渲染界面不同,Flutter并不需要使用原生组件来渲染界面,而是使用自带的渲染引擎(Engine层)来绘制页面组件,如下图所示Flutter的技术架构简图。
在这里插入图片描述
Flutter 引擎部分Engine是用C++开发的,Skia部分是开源的二维图形库,提供了适用于多种软硬件平台的通用API,Skia作为渲染/GPU的角色。

在 Flutter 的 Engine 层向 Dart 层的暴露了 Canvas, PictureRecorder 等接口,利用这些接口可以绘制自己想要的图像。

通过直接调用 API 绘制图像,这种更像指令式操作。

在 Flutter 中,通过Flutter Sdk 提供的 Widget 组件组件,可以构建出精美的图像布局,这些 widget 并不是最终显示在 界面的组件,就像 ReactNative 的虚拟 DOM 一样。

每一个一个 Widget 构建 到最终显示在显示器上图像主要经历了三个阶段: Widget --> Element --> RenderObject

关于 Widget、Element、RenderObjec 的绘制过程 将会在 公人号 biglead 我的大前端生涯 中下一节中更新。

4 Flutter Vsync 流程

flutter 中Vsync通信机制如下图所示:
在这里插入图片描述


完毕
公众号 我的大前端生涯

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
3509 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4624 0
Flutter中焦点FocusNode使用分析Flutter输入框焦点事件的捕捉与监听
在Flutter使用FocusNode来捕捉监听TextField的焦点获取与失去,同时也可通过FocusNode来使用绑定对应的TextField获取焦点与失去焦点。
1839 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9519 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
850 0
深入分析 Flutter 渲染性能
Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等。虽然它在渲染性能上有不少缺陷,但是某种程度上,某些缺陷也是为了实现更高层次的设计目标而不得不承受的结果。
4021 0
Flutter图像绘制原理深入分析
本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程
586 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
4271 0
Flutter Image内存--强引用分析方法
概述 据了解,很多Flutter业务上线后都出现内存占用较高的问题,首当其冲的是 Image 内存占用过多。 Image 图片内存过高,可能由于 Flutter ImageCache 对内存缺房控制力导致,也有可能是被业务代码强引用,泄漏导致。如果 Image 被业务强引用,则调整 ImageCache 容量,增加 gc 次数都没有效果。 面对这种“强引用”的泄漏
904 0
+关注
早起的年轻人
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、微信小程序等
29
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载