Flutter-engine 显示Image逻辑

1,638 阅读1分钟

前言

前面讲到Flutter Dart层面的显示Image的逻辑,其中我们可以看到ui.instantiateImageCodec(bytes)的方法,我们今天就从这里入手带大家看看Flutter-engine内部对于获取Image数据之后做了什么。

正文

InstantiateImageCodec

instantiateImageCodec对应在Flutter-engine里面的方法是InstantiateImageCodec,里面的逻辑其实就是获取从Dart层的各个参数,根据不同的参数生成了一个Codec句柄,这个Codec句柄上面有分别有实现了MultiFrameCodec或者SingleFrameCodec的ui_codec,然后再返回到Dart层。

其中MakeFromData(buffer) 是关键方法,它里面其实就是获取了收集到的image数据去分析然后返回了不同的Codec。

GetNextFrame

我们可以在Dart层调用的时候看到了一句_nextFrame = await _codec.getNextFrame(); 那么getNextFrame是怎样走呢?我们可以看到getNextFrame方法是属于MultiFrameCodec的。其实方法里面看起来是很简单的,里面做了几个事情。 1.先获取UI Task线程。 2.获取当前Skia处理的Queue 3.获取上下文 4.切换到IO线程中运行GetNextFrameAndInvokeCallback

GetNextFrameAndInvokeCallback 里面分为了三个步骤

GetNextFrameImage

做的事情大致就是获取下一帧的SkImage数据,并且保存了上一帧的关键数据。这里我们可以看到有多次Copy的操作,所以这些操作都是在IO线程中的。

InvokeCallback

这里做的事情大概就是获取刚刚从GetNextFrameImage中拿到的SkImage,并且将它塞到了FrameInfo的结构体里面,并且改变下一帧的index。然后在UI线程中Callback回去。

总结

这里做的事情其实就是选择Codec然后解析图片,然后整个流程都是在IO线程中处理的。

谢谢阅读