最详细版本|UI2Code智能生成Flutter代码——版面分析篇

闲鱼技术 2019-02-27

深度学习 算法 机器学习 边缘检测 ui2code 传统算法

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

开篇:

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

架构设计:

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



demo5.png

通过前后景分离算法,将UI视觉稿剪裁为GUI元素:

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

背景分析:

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

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


b002.png

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

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

登录 后评论
下一篇
corcosa
15945人浏览
2019-10-08
相关推荐
Flutter之禅 内存优化篇
4309人浏览
2018-10-11 11:42:38
0
0
0
3577