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

  1. 云栖社区>
  2. 闲鱼技术>
  3. 博客>
  4. 正文

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

闲鱼技术 2019-02-27 17:55:06 浏览3567
展开阅读全文

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

开篇:

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

架构设计:

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



demo5.png

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

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

背景分析:

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

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


b002.png

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

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

网友评论

登录后评论
0/500
评论
闲鱼技术
+ 关注
所属云栖号: 闲鱼技术