Flutter-engine 顯示Image邏輯

KoonChaoSo發表於2019-12-08

前言

前面講到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執行緒中處理的。

謝謝閱讀

相關文章