Flutter-engine 顯示Image邏輯

KoonChaoSo發表於2019-12-08
原文網址 : https://juejin.im/post/5decf35f6fb9a0160e2a1155
Flutter

前言

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

Flutter-engine 顯示Image邏輯

GetNextFrame

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

Flutter-engine 顯示Image邏輯

GetNextFrameAndInvokeCallback 裡面分為了三個步驟

GetNextFrameImage

做的事情大致就是獲取下一幀的SkImage資料，並且儲存了上一幀的關鍵資料。這裡我們可以看到有多次Copy的操作，所以這些操作都是在IO執行緒中的。

Flutter-engine 顯示Image邏輯

InvokeCallback

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

Flutter-engine 顯示Image邏輯

總結

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

謝謝閱讀

相關文章