闲鱼技术-上叶,仝辉,深宇

开篇:


  在《UI2CODE--整体设计》篇中,我们提到UI2CODE工程的第一步是版面分析,如果是白色的简单背景,我们可以像切西瓜一样,将图片信息切割为GUI元素。但是在实际生产过程中,UI的复杂度会高很多。本篇我们将围绕版面分析这块内容分享我们的探索过程。

架构设计:

  版面分析主要处理UI图像的前景提取和背景分析:







通过前后景分离算法,将UI视觉稿剪裁为GUI元素:
背景分析:通过机器视觉算法,分析背景颜色,背景渐变方向,以及背景的连通区域。 前景分析:通过深度学习算法,对GUI碎片进行整理,合并,识别。
背景分析:

  背景分析的关键在于找到背景的连通区域和闭合区间;

  我们从一个实际的应用场景来分析整个背景提取的过程:




我们期望将上一张图片,通过UI2CODE,来提取GUI元素。

第一步:判断背景区块,通过s