Flutter 源码学习pt5, painting

武当山王也2024-03-04 14:21

预备知识

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

基础知识

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

绘制线路（典型路径）

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

Flutter painting

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

Binding

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

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 树。