Flutterengine顯示Image邏輯

NO IMAGE

前言

前面講到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。

Flutterengine顯示Image邏輯

GetNextFrame

我們可以在Dart層調用的時候看到了一句_nextFrame = await _codec.getNextFrame(); 那麼getNextFrame是怎樣走呢?我們可以看到getNextFrame方法是屬於MultiFrameCodec的。其實方法裡面看起來是很簡單的,裡面做了幾個事情。
1.先獲取UI Task線程。
2.獲取當前Skia處理的Queue
3.獲取上下文
4.切換到IO線程中運行GetNextFrameAndInvokeCallback

Flutterengine顯示Image邏輯

GetNextFrameAndInvokeCallback 裡面分為了三個步驟

GetNextFrameImage

做的事情大致就是獲取下一幀的SkImage數據,並且保存了上一幀的關鍵數據。這裡我們可以看到有多次Copy的操作,所以這些操作都是在IO線程中的。

Flutterengine顯示Image邏輯

InvokeCallback

這裡做的事情大概就是獲取剛剛從GetNextFrameImage中拿到的SkImage,並且將它塞到了FrameInfo的結構體裡面,並且改變下一幀的index。然後在UI線程中Callback回去。

Flutterengine顯示Image邏輯

總結

這裡做的事情其實就是選擇Codec然後解析圖片,然後整個流程都是在IO線程中處理的。

謝謝閱讀

相關文章

ThreadLocal快速瞭解一下

KafkaProducerSender線程詳解(含詳細的執行流程圖)

解析transform,transition和animation的區別

mvcc的兩種層次的理解