Flutter 绘制原理

原创于 2024-03-27 18:27:17 发布 · 872 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了Flutter中的Canvas、Layer和Scene在绘制过程中的角色，Canvas负责指令记录，Layer包括容器和绘制类，Scene管理屏幕内容。Picture是绘制产物，PictureLayer用于保存和复用绘制结果。还提到如何将Canvas绘制的位图导出为图片以及Layer的作用和类型划分。

Flutter中和绘制相关的对象有三个，分别是Canvas、Layer 和 Scene：

Canvas：封装了Flutter Skia各种绘制指令，比如画线、画圆、画矩形等指令。
Layer：分为容器类和绘制类两种；暂时可以理解为是绘制产物的载体，比如调用 Canvas 的绘制 API 后，相应的绘制产物被保存在 PictureLayer.picture 对象中。
Scene：屏幕上将要要显示的元素。在上屏前，我们需要将Layer中保存的绘制产物关联到 Scene 上。

Flutter 绘制流程：

构建一个 Canvas，用于绘制；同时还需要创建一个绘制指令记录器，因为绘制指令最终是要传递给 Skia 的，而 Canvas 可能会连续发起多条绘制指令，指令记录器用于收集 Canvas 在一段时间内所有的绘制指令，因此Canvas 构造函数第一个参数必须传递一个 PictureRecorder 实例。
Canvas 绘制完成后，通过 PictureRecorder 获取绘制产物，然后将其保存在 Layer 中。
构建 Scene 对象，将 layer 的绘制产物和 Scene 关联起来。
上屏；调用window.render API 将Scene上的绘制产物发送给GPU。

Picture

Picture 实际上是一系列的图形绘制操作指令，这一点可以参考 Picture 类源码的注释。
Picture 要显示在屏幕上，必然会经过光栅化，随后Flutter会将光栅化后的位图信息缓存起来，也就是说同一个 Picture 对象，其绘制指令只会执行一次，执行完成后绘制的位图就会被缓存起来。

综合以上两点，我们可以看到 PictureLayer 的“绘制产物”一开始是一些列“绘图指令”，当第一次绘制完成后，位图信息就会被缓存，绘制指令也就不会再被执行了，所以这时“绘制产物”就是位图了。为了便于理解，后续我们可以认为指的就是绘制好的位图。

Canvas绘制的位图转图片

既然 Picture 中保存的是绘制产物，那么它也应该能提供一个方法能将绘制产物导出，实际上，Picture有一个toImage方法，可以根据指定的大小导出Image。

//将图片导出为Uint8List
final Image image = await pictureLayer.picture.toImage();
final ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
final Uint8List pngBytes = byteData!.buffer.asUint8List();
print(pngBytes);

Layer

作用

可以在不同的frame之间复用绘制产物（如果没有发生变化）。
划分绘制边界，缩小重绘范围。

类型

OffsetLayer：根 Layer，它继承自ContainerLayer，而ContainerLayer继承自 Layer 类，我们将直接继承自ContainerLayer 类的 Layer 称为容器类Layer，容器类 Layer 可以添加任意多个子Layer。
1. 将组件树的绘制结构组成一棵树。
  
  因为 Flutter 中的 Widget 是树状结构，那么相应的 RenderObject 对应的绘制结构也应该是树状结构，Flutter 会根据一些“特定的规则”（后面解释）为组件树生成一棵 Layer 树，而容器类Layer就可以组成树状结构（父 Layer 可以包含任意多个子 Layer，子Layer又可以包含任意多个子Layer）。
2. 可以对多个 layer 整体应用一些变换效果。
  
  容器类 Layer 可以对其子 Layer 整体做一些变换效果，比如剪裁效果（ClipRectLayer、ClipRRectLayer、ClipPathLayer）、过滤效果（ColorFilterLayer、ImageFilterLayer）、矩阵变换（TransformLayer）、透明变换（OpacityLayer）等。
PictureLayer：保存绘制产物的 Layer，它直接继承自 Layer 类。我们将可以直接承载（或关联）绘制结果的 Layer 称为绘制类 Layer。