最詳細(xì)版本|UI2Code智能生成Flutter代碼——版面分析篇

閑魚技術(shù)-上葉，仝輝，深宇

開篇:


??在《UI2CODE--整體設(shè)計(jì)》篇中，我們提到UI2CODE工程的第一步是版面分析，如果是白色的簡(jiǎn)單背景，我們可以像切西瓜一樣，將圖片信息切割為GUI元素。但是在實(shí)際生產(chǎn)過程中，UI的復(fù)雜度會(huì)高很多。本篇我們將圍繞版面分析這塊內(nèi)容分享我們的探索過程。

架構(gòu)設(shè)計(jì)：

??版面分析主要處理UI圖像的前景提取和背景分析：







通過前后景分離算法，將UI視覺稿剪裁為GUI元素:
背景分析：通過機(jī)器視覺算法，分析背景顏色，背景漸變方向，以及背景的連通區(qū)域。 前景分析：通過深度學(xué)習(xí)算法，對(duì)GUI碎片進(jìn)行整理，合并，識(shí)別。
背景分析：

??背景分析的關(guān)鍵在于找到背景的連通區(qū)域和閉合區(qū)間；

??我們從一個(gè)實(shí)際的應(yīng)用場(chǎng)景來(lái)分析整個(gè)背景提取的過程：




我們期望將上一張圖片，通過UI2CODE，來(lái)提取GUI元素。

第一步：判斷背景區(qū)塊，通過s

• ? 上一篇： ELK日志分析方案
• ? 下一篇：.NET進(jìn)階篇-丑話先說(shuō)，F(xiàn)lag先立--致青春