Flutter 源码学习pt5, painting

预备知识

开始分析Flutter Sdk层的绘制流程之前,回顾一下计算机图形学的基础知识。

基础知识

  • 屏幕是二维的,最终展示的像素点,也可以认为是屏幕最终渲染的产物是图像
  • 图形指由点、线、面等几何元素构成的形状或图案。图形可以是二维的,也可以是三维的。
  • 图像由图形组成,对于照片而言,每个像素点可以看做一个图形
  • 绘制,在绘制中,类比现实中的作画,产出一个图形分别需要三个基础元素,调色板画笔画布。另一个概念,叫Blend(混合)表示同一块画布上颜色如何混合

绘制线路(典型路径)

Flutter 是众多跨平台方案的一种,其中,Skia早于Flutter 实现了跨平台图形图像绘制,OpenGL则为图形跨平台。所以跨平台本身比不是新鲜词了,本质上是一种封装, 当任意层有多个实现且相对稳定时,跨平台的统一层就会出现,特别像分久必合, 螺旋发展。

Flutter painting

上述基础知识和绘制流程,我们可以明确Flutter在目前整个绘制链条当中的位置,在skia等高级图形图像的基础上,为应用开发提供更便捷的能力。明确了定位,我们再来看flutter sdk 中的painting。

Binding

Binding是Flutter和其他组件沟通的接口,但PaintingBinding很特殊,它更像是一个绘制的资源管家, 提供了imageCache缓存图像,同时混入了ServicesBinding, 实现了handleMemoryPressure释放缓存的图像,监听handleSystemMessage中的fontsChange, 通知RenderObjectCustomPainter等进行重绘。

dart 复制代码
mixin PaintingBinding on BindingBase, ServicesBinding {
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;
    _imageCache = createImageCache();
    shaderWarmUp?.execute();
  }
}

我们回头看一下,这painting包下的文件,alignment, border, box_decoration, clip, color 具象化的stadium_border, star_border, text_painter, 这些文件都表明是为了辅助我们绘制。因此,painting 并没有和其他层交互。具体的绘制实现是在sky_engine, 由引擎进行绘制。

所以 Flutter SDK 层只是为我们提供了方便的SDK,具体的绘制并不在这里,engine才是最终负责绘制,这里的painting是配置,也就是我们常说的三棵树中的 widget 树。

相关推荐
无知的前端2 小时前
Flutter 一文精通Isolate,使用场景以及示例
android·flutter·性能优化
yidahis2 小时前
Flutter 运行新建项目也报错?
flutter·trae
木马不在转2 小时前
Flutter-权限permission_handler插件配置
flutter
江上清风山间明月6 小时前
一周掌握Flutter开发--9. 与原生交互(下)
flutter·交互·原生·methodchannel
GeniuswongAir6 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
sayen6 小时前
记录 flutter 文本内容展示过长优化
前端·flutter
勤劳打代码6 小时前
剑拔弩张——焦点竞争引的发输入失效
flutter·客户端·设计
张风捷特烈10 小时前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter
关山月10 小时前
Flutter 图像上传与裁剪
flutter
陈朝晖SHS11 小时前
Flutter求助贴
flutter