CN113391799A - 界面代码生成方法、图层处理方法、装置及计算设备 - Google Patents

Abstract

本发明实施例公开了一种界面代码生成方法，包括：对设计稿进行识别，得到设计稿的图层的图层数据；对设计稿的图层数据进行修正处理；以及基于修正处理后的图层数据生成设计稿对应的界面代码。本发明实施例还公开了相应的设计稿的图层处理方法、装置、计算设备及存储介质。

Description

界面代码生成方法、图层处理方法、装置及计算设备

技术领域

本发明涉及图像处理技术领域，尤其涉及一种界面代码生成方法、图层处理方法、装置及计算设备。

背景技术

前端开发是创建图形用户界面呈现给用户的过程，例如通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。一个常见的前端开发周期中，设计师负责产出设计稿，而前端开发工程师以设计稿为输入进行开发。

而随着智能化已经开始应用于各行各业，前端作为互联网中离用户最近的一环，也理所当然希望借助智能化的能力来大幅提高开发效率，减少人力成本，给用户创建更好的体验，也就是采用设计稿转代码技术(简称D2C)，将设计稿转换为界面代码。

目前，主流设计工具(Sketch、PS、XD等)的三方插件开发能力逐渐成熟，可以借助官方提供的API来还原一些基本的结构化信息和样式信息，从而完成对设计稿原始信息的提取。然而，这些工具提取出的图层数据存在描述混乱、不精简甚至错误的问题，给后续生成界面代码的工作带来极大困扰。

因此，期望提供一种设计稿的界面代码生成方案以及图层处理方案。

发明内容

为此，本发明实施例提供一种界面代码生成方法、图层处理方法、装置及计算设备，以力图解决或至少缓解上面存在的问题。

根据本发明实施例的一个方面，提供了一种界面代码生成方法，包括：对设计稿进行识别，得到设计稿的图层的图层数据；对设计稿的图层数据进行修正处理；以及基于修正处理后的图层数据生成设计稿对应的界面代码。

可选地，在根据本发明实施例的方法中，对设计稿进行识别的步骤包括：遍历设计稿包括的至少一个图层；对遍历到的图层，提取图层所包含的元素的相关信息，以形成图层的图层数据。

可选地，在根据本发明实施例的方法中，对设计稿的图层数据进行修正处理的步骤包括：获取图层数据包含的图像；对图像进行边缘检测，得到边缘图像；基于边缘图像判断图像是否满足规则条件；在图像满足规则条件的情况下，提取图像的样式；基于提取到的样式修改图层数据。

可选地，在根据本发明实施例的方法中，基于边缘图像判断图像是否满足规则条件的步骤包括：基于边缘图像，判断图像是否在水平方向和/或竖直方向上对称；如果图像在水平方向和竖直方向上均对称，则图像满足规则条件。

可选地，在根据本发明实施例的方法中，基于边缘图像，判断图像是否在水平方向上对称的步骤包括：获取边缘图像的第一侧边缘像素点；判断是否存在横轴坐标值相同的多个第一侧边缘像素点；如果存在，则图像在水平方向不对称。

可选地，在根据本发明实施例的方法中，基于边缘图像，判断图像是否在水平方向上对称的步骤包括：获取边缘图像的第二侧边缘像素点；判断是否存在横轴坐标值相同的多个第二侧边缘像素点；如果存在，则图像在水平方向不对称。

可选地，在根据本发明实施例的方法中，基于边缘图像，判断图像是否在水平方向上对称的步骤还包括：如果不存在横轴坐标值相同的多个第一侧边缘像素点、且不存在横轴坐标值相同的多个第二侧边缘像素点，则图像在水平方向上对称。

可选地，在根据本发明实施例的方法中，获取边缘图像的第一侧边缘像素点或者第二侧边缘像素点的步骤包括：基于水平方向，将边缘图像划分为第一侧区域和第二侧区域；基于边缘图像位于第一侧区域的部分，获取图像的第一侧边缘像素点，相邻第一侧边缘像素点的横轴坐标值不同；或者基于边缘图像位于第二侧区域的部分，获取图像的第二侧边缘像素点，相邻第二侧边缘像素点的横轴坐标值不同。

可选地，在根据本发明实施例的方法中，基于边缘图像，判断图像是否在竖直方向上对称的步骤包括：获取边缘图像的第三侧边缘像素点；判断是否存在纵轴坐标值相同的多个第三侧边缘像素点；如果存在，则图像在竖直方向不对称。

可选地，在根据本发明实施例的方法中，基于边缘图像，判断图像是否在竖直方向上对称的步骤包括：获取边缘图像的第四侧边缘像素点；判断是否存在纵轴坐标值相同的多个第四侧边缘像素点；如果存在，则图像在竖直方向上不对称。

可选地，在根据本发明实施例的方法中，基于边缘图像，判断图像是否在竖直方向上对称的步骤还包括：如果不存在纵轴坐标值相同的多个第三侧边缘像素点、且不存在纵轴坐标值相同的多个第四侧边缘像素点，则图像在竖直方向上对称。

可选地，在根据本发明实施例的方法中，获取边缘图像的第三侧边缘像素点或者第四侧边缘像素点的步骤包括：基于竖直方向，将边缘图像划分为第三侧区域和第四侧区域；基于边缘图像位于第三侧区域的部分，获取图像的第三侧边缘像素点，相邻第三侧边缘像素点的纵轴坐标值不同；或者基于边缘图像位于第四侧区域的部分，获取图像的第四侧边缘像素点，相邻第四侧边缘像素点的纵轴坐标值不同。

可选地，在根据本发明实施例的方法中，获取图层数据包含的图像的步骤包括：查找图层数据中类型为图像的元素；基于图层数据中元素的来源获取图像。

可选地，在根据本发明实施例的方法中，基于提取到的样式修改图层数据的步骤包括：基于提取到的样式，修改图层数据中图像对应的元素的类型和样式，并删除图层数据中图像对应的元素的来源。

可选地，在根据本发明实施例的方法中，图像的样式至少包括以下之一：边框、边框半径、背景色。

可选地，在根据本发明实施例的方法中，还包括：将设计稿的至少一个图层的图层数据逐个进行绘制，至少一个图层具有叠放顺序；将所绘制的至少一个图层按叠放顺序叠放，得到最终图像；将最终图像与所绘制的各个图层进行比较；如果图层的各个像素点均与其在最终图像中的对应像素点的像素值不同，则删除图层的图层数据。

可选地，在根据本发明实施例的方法中，还包括：如果图层的至少部分像素点与其在最终图像中的对应像素点的像素值相同，则判断顶层图层是否包括至少部分像素点；如果包括，则删除图层的图层数据。

可选地，在根据本发明实施例的方法中，还包括：对于所绘制的各个图层，基于叠放顺序确定图层的下一图层；比较图层与下一图层是否存在差异；如果不存在差异，则删除图层及其图层数据。

可选地，在根据本发明实施例的方法中，比较图层与下一图层是否存在差异的步骤包括：将图层的像素点与其在下一图层中的对应像素点进行比较；如果图层的各个像素点均与对应像素点的像素值相同，则图层与下一图层不存在差异；如果图层的任一像素点与对应像素点的像素值不同，则图层与下一图层存在差异。

根据本发明实施例的另一个方面，提供了一种设计稿的图层处理方法，包括：获取设计稿包括的至少一个图层的图层数据；获取图层数据包含的图像；对图像进行边缘检测，得到边缘图像；基于边缘图像判断图像是否满足规则条件；在图像满足规则条件的情况下，提取图像的样式；以及基于提取到的样式修改图层数据。

根据本发明实施例的另一个方面，提供了一种设计稿的图层处理方法，包括：获取设计稿包括的至少一个图层的图层数据，至少一个图层具有叠放顺序；将至少一个图层的图层数据逐个进行绘制；将所绘制的至少一个图层按叠放顺序叠放，得到最终图像；将最终图像与所绘制的各个图层进行比较；以及如果图层的各个像素点均与其在最终图像中的对应像素点的像素值不同，则删除图层的图层数据。

根据本发明实施例的另一个方面，提供了一种界面代码生成装置，包括：图层识别单元，适于对设计稿进行识别，得到设计稿的图层的图层数据；图层处理单元，适于对设计稿的图层数据进行修正处理；以及代码生成单元，适于基于修正处理后的图层数据生成设计稿对应的界面代码。

根据本发明实施例的另一个方面，提供了一种设计稿的图层处理装置，包括：图层获取单元，适于获取设计稿包括的至少一个图层的图层数据；图像获取单元，适于获取图层数据包含的图像；边缘检测单元，适于对图像进行边缘检测，得到边缘图像；规则判断单元，适于基于边缘图像判断图像是否满足规则条件；样式提取单元，适于在图像满足规则条件的情况下，提取图像的样式；以及数据修改单元，适于基于提取到的样式修改图层数据。

根据本发明实施例的另一个方面，提供了一种设计稿的图层处理装置，包括：图层获取单元，适于获取设计稿包括的至少一个图层的图层数据，至少一个图层具有叠放顺序；图层绘制单元，适于将至少一个图层的图层数据进行绘制；图层叠放单元，适于将所绘制的至少一个图层按叠放顺序叠放，得到最终图像；图层比较单元，适于将最终图像与所绘制的各个图层进行比较；以及数据删除单元，适于如果图层的各个像素点均与其在最终图像中的对应像素点的像素值不同，则删除图层的图层数据。

根据本发明实施例的另一个方面，提供了一种计算设备，包括：一个或多个处理器；存储器；以及一个或多个程序，其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，该一个或多个程序包括用于执行根据本发明实施例的方法的指令。

根据本发明实施例的还有一个方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，该指令当被计算设备执行时，使得计算设备执行根据本发明实施例的方法。

根据本发明实施例的界面代码生成方案(例如界面代码生成方法900)以及图层处理方案(例如图层处理方法300和/或600)利用计算机视觉能力对从设计稿里提取的图层数据进行修正处理，减少了大部分对设计稿的约束，使得在不约定或者少约定协议或者规范的情况下，可以简便且较低成本地达到之前需要与设计师约定好协议或者规范才能实现的较优秀的设计稿数据描述。

其中，可以通过判断图像是否满足规则条件来找出图层数据中不必要采用图像类型描述的元素，并将其修正为采用诸如形状之类的其他类型来进行描述，为后续开发提供便利。还可以通过比较每次绘制的图层以及最终图像来找出对最终的视觉效果没有影响的无用图层，并将其删除，大大精简了图层数据，提高了图层数据的结构合理性。

上述说明仅是本发明实施例技术方案的概述，为了能够更清楚了解本发明实施例的技术手段，而可依照说明书的内容予以实施，并且为了让本发明实施例的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明实施例的具体实施方式。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个实施例的界面代码生成系统100的示意图；

图2示出了根据本发明一个实施例的计算设备200的示意图；

图3示出了根据本发明一个实施例的设计稿的图层处理方法300的流程图；

图4A和图4B分别示出了根据本发明一个实施例的图像以及边缘图像的示意图；

图5A示出了根据本发明一个实施例的基于图4B所示的边缘图像获取的第一侧边缘像素点以及第二侧边缘像素点的示意图；

图5B示出了根据本发明一个实施例的基于图4B所示的边缘图像获取的第三侧边缘像素点以及第四侧边缘像素点的示意图；

图6示出了根据本发明一个实施例的设计稿的图层处理方法600的流程图；

图7示出了根据本发明一个实施例的设计稿的图层处理装置700的示意图；

图8示出了根据本发明一个实施例的设计稿的图层处理装置800的示意图；

图9示出了根据本发明一个实施例的界面代码生成方法900的流程图；以及

图10示出了根据本发明一个实施例的界面代码生成装置1000的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的界面代码生成系统100的示意图。如图1所示，界面代码生成系统100包括处理前端110和服务器120。在其他实施方式中，界面代码生成系统100可以包括不同的和/或附加的模块。

处理前端110是任何需要将设计稿转化为界面代码的请求方。例如，在一种方式中，处理前端110可以接收Sketch、PSD等矢量格式以及PNG、JPG等位图格式的设计稿。设计稿可以为设计师采用任何图形设计软件生成的任意类型的设计图稿，如广告样式的设计图稿、室内装修的设计图稿等等，本发明对此不做限制。

可以理解地，设计稿通常包括至少一个图层，各图层按顺序叠放在一起，组合起来形成设计稿对应的用户图形界面的最终效果。图层中通常可以包括文本、图像、表格、插件等等元素，或者也可以在里面再嵌套图层。

处理前端110可以将设计稿发送到服务器120，请求获取基于该设计稿生成的界面代码。本发明实施例不受限于处理前端110的具体形式。服务器120可以以各种方式接收处理前端110的请求。例如服务器120可以提供具有预定格式定义的应用程序接口(API)，以方便处理前端110根据定义来组织请求，并发送到服务器120。

服务器120可以对设计稿进行图层识别，得到包含设计稿中所有元素的相关信息的至少一个图层的图层数据。具体地，服务器120可以读取设计稿，按照深度优先搜索的方式遍历设计稿包含的至少一个图层，并提取各图层的图层数据。图层数据可以包括该图层所包括的各元素的相关信息，例如位置和大小等等。由于各个类型的图层所拥有的样式不同，需要对图像(Image)类型、形状(Shape)类型、文本(Text)类型以及其他类型的图层分别做处理，将相关的设计属性(例如sketch属性)转化为界面样式语言(例如CSS语言)理解的形式。

根据本发明的实施方式，服务器120中驻留有设计稿的图层处理装置700和/或设计稿的图层处理装置800，可以对设计稿的至少一个图层的图层数据进行修正处理，并基于修正处理后的图层数据生成设计稿对应的界面代码。

可以理解地，在前端工程师与设计师协同实现前端开发的场景中，设计师可以利用处理前端110将设计稿发送至服务器120，由服务器120基于设计稿自动生成界面代码之后将界面代码发送给前端工程师。或者，也可以由前端工程师利用处理前端110将设计师完成的设计稿发送至服务器120，服务器120基于设计稿自动生成界面代码。

根据本发明的实施方式，上述界面代码生成系统100中的各部件(例如处理前端110、服务器120以及服务器120中的各装置)均可以通过如下所述的计算设备200来实现。

图2示出了根据本发明一个实施例的计算设备200的示意图。如图2所示，在基本的配置202中，计算设备200典型地包括系统存储器206和一个或者多个处理器204。存储器总线208可以用于在处理器204和系统存储器206之间的通信。

取决于期望的配置，处理器204可以是任何类型的处理器，包括但不限于：微处理器(μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器204可以包括诸如一级高速缓存210和二级高速缓存212之类的一个或者多个级别的高速缓存、处理器核心214和寄存器216。示例的处理器核心214可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器218可以与处理器204一起使用，或者在一些实现中，存储器控制器218可以是处理器204的一个内部部分。

取决于期望的配置，系统存储器206可以是任意类型的存储器，包括但不限于：易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器206可以包括操作系统220、一个或者多个应用222以及程序数据224。在一些实施方式中，应用222可以布置为在操作系统上由一个或多个处理器204利用程序数据224执行指令。

计算设备200还可以包括有助于从各种接口设备(例如，输出设备242、外设接口244和通信设备246)到基本配置202经由总线/接口控制器230的通信的接口总线240。示例的输出设备242包括图形处理单元248和音频处理单元250。它们可以被配置为有助于经由一个或者多个A/V端口252与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口244可以包括串行接口控制器254和并行接口控制器256，它们可以被配置为有助于经由一个或者多个I/O端口258和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备246可以包括网络控制器260，其可以被布置为便于经由一个或者多个通信端口264与一个或者多个其他计算设备262通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以是这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

计算设备200可以实现为服务器，例如数据库服务器、应用程序服务器和WEB服务器等，也可以实现为包括桌面计算机和笔记本计算机配置的个人计算机。当然，计算设备200也可以实现为小尺寸便携(或者移动)电子设备的至少一部分。

在根据本发明的实施例中，计算设备200可以实现为服务器120或者服务器120中的图层处理装置700和/或图层处理装置800，并分别被配置为执行根据本发明实施例的界面代码生成方法900、设计稿的图层处理方法300或者600。其中，计算设备200的应用222中包含执行根据本发明实施例的图层处理方法300或者600、界面代码生成方法900的多条指令，而程序数据224还可以存储界面代码生成系统100的配置数据等内容。

图3示出了根据本发明一个实施例的设计稿的图层处理方法300的流程图。图层处理方法300可以在设计稿的图层处理装置700中执行。

如图3所示，图层处理方法300始于步骤S310。在步骤S310中，可以获取设计稿包括的至少一个图层的图层数据，并对各图层的图层数据，获取该图层数据包含的图像。通常地，图层数据为JSON格式，并包括一个或者多个元素，以及这些元素的相关信息，例如元素的类型(type)、标识(id)、样式(style)、位置(通常用x轴坐标、y轴坐标表示)、来源(source)等。其中，元素的类型可以是文本、图像、表格、或者插件等，样式可以包括尺寸、颜色、透明度、字体、字号等，来源可以是链接地址等。本发明实施例对图层数据所包含的元素的相关信息不做限制，任何可以描述元素的信息均在本发明的保护范围之内。

根据本发明的实施方式，可以先查找图层数据中类型为图像的元素，再基于该图层数据中记录的该元素的来源获取图像。

而后，可以在步骤S320中，对获取到的图像进行边缘检测，得到包括有边缘的边缘图像。

可以采用任何现有的边缘检测算法。例如，基于搜索的边缘检测方法首先计算边缘强度，通常用一阶导数表示，例如梯度模。然后，用计算估计边缘的局部方向，通常采用梯度的方向，并利用此方向找到局部梯度模的最大值。基于零交叉的方法找到由图像得到的二阶导数的零交叉点来定位边缘。通常用拉普拉斯算子或非线性微分方程的零交叉点。

其中，一阶导数的算子可以包括：Roberts Cross算子、Prewitt算子、Sobel算子、Kirsch算子、罗盘算子等。二阶导数的算子可以包括：Marr-Hildreth、在梯度方向的二阶导数过零点、Canny算子、Laplacian算子等。该边缘检测算法仅是示例而非限制，本领域技术人员在实践中可以采用其他各种边缘检测算法来实现边缘检测的目的。

边缘检测得到的边缘图像通常是二值图像。例如边缘像素点的像素值为1，而非边缘像素点的像素值为0。不过，这仅为示例，实际上边缘图像也可以为灰度图像或彩色图像或视差图像，其中非边缘像素点的像素值可以为0，而边缘像素点的取值可以是处于一定取值范围中。

图4A和图4B分别示出了根据本发明一个实施例的图像以及边缘图像的示意图。对图4A所示的图像进行边缘检测后，得到了图4B所示的边缘图像，图4B所示的边缘图像为二值图像，即形成边缘的边缘像素点的像素值为1(白色)，而非边缘像素点的像素值为0(黑色)。

而后，可以在步骤S330中，基于边缘图像来判断图层数据包含的图像是否满足规则条件。具体地，可以基于边缘图像，判断图像是否在水平方向和/或竖直方向上对称。如果图像同时在水平方向和竖直方向上对称，则认为该图像不满足规则条件。如果图像在水平方向和竖直方向中的任一方向上不对称，则认为该图像不满足规则条件。

可以获取边缘图像的第一侧边缘像素点和/或第二侧边缘像素点，基于第一侧边缘像素点和/或第二侧边缘像素点来判断图像是否在水平方向上对称。

在一些实施例中，可以基于水平方向，将边缘图像均等划分为第一侧区域和第二侧区域。例如，可以根据边缘图像的尺寸确定中心点。假定在该边缘图像的中心点处设一条水平方向的直线，该直线可将边缘图像均等划分为第一侧区域和第二侧区域。第一侧区域可以是上侧区域和上侧区域中的任一个，第二侧区域则是其中另一个。

基于边缘图像位于第一侧区域的部分，可以获取边缘图像的第一侧边缘像素点。即，从位于第一侧区域的部分边缘像素点中选择出第一侧边缘点，并且要满足相邻的第一侧边缘像素点的横轴坐标值必须不同的要求。

类似地，基于边缘图像位于第二侧区域的部分，可以获取边缘图像的第二侧边缘像素点。即，从位于第二侧区域的部分边缘像素点中选择出第二侧边缘点，相邻的第二侧边缘像素点的横轴坐标值不同。

图5A示出了根据本发明一个实施例的基于图4B所示的边缘图像获取的第一侧边缘像素点以及第二侧边缘像素点的示意图。在图5A中，第一侧为上侧，第二侧为下侧。上侧边缘像素点和下侧边缘像素点的像素值为1(白色)，其余像素点的像素值为0(黑色)。

可以判断是否存在横轴坐标值相同的多个第一侧边缘像素点，以及/或者判断是否存在横轴坐标值相同的多个第二侧边缘像素点。如果不存在横轴坐标值相同的多个第一侧边缘像素点、且不存在横轴坐标值相同的多个第二侧边缘像素点，则认为图像在水平方向上对称。如果存在横轴坐标值相同的多个第一侧边缘像素点、或者存在横轴坐标值相同的多个第二侧边缘像素点，则认为图像在水平方向上不对称。

可以获取边缘图像的第三侧边缘像素点和/或第四侧边缘像素点，基于第三侧边缘像素点和/或第四侧边缘像素点来判断图像是否在竖直方向上对称。

在一些实施例中，可以基于竖直方向，将边缘图像均等划分为第三侧区域和第四侧区域。例如，可以根据边缘图像的尺寸确定中心点。假定在该边缘图像的中心点处设一条竖直方向的直线，该直线可将边缘图像均等划分为第三侧区域和第四侧区域。此处，第三侧区域可以是左侧区域和右侧区域中的任一个，第四侧区域则是其中另一个。

基于边缘图像位于第三侧区域的部分，可以获取边缘图像的第三侧边缘像素点。即，从位于第三侧区域的部分边缘像素点中选择出第三侧边缘点，并且要满足相邻的第三侧边缘像素点的纵轴坐标值必须不同的要求。

类似地，基于边缘图像位于第四侧区域的部分，可以获取边缘图像的第四侧边缘像素点。即，从位于第四侧区域的部分边缘像素点中选择出第四侧边缘点，相邻的第四侧边缘像素点的纵轴坐标值不同。

图5B示出了根据本发明一个实施例的基于图4B所示的边缘图像获取的第三侧边缘像素点以及第四侧边缘像素点的示意图。在图5B中，第三侧为左侧，第四侧为右侧。左侧边缘像素点和右侧边缘像素点的像素值为1(白色)，其余像素点的像素值为0(黑色)。

可以判断是否存在纵轴坐标值相同的多个第三侧边缘像素点，以及/或者判断是否存在纵轴坐标值相同的多个第四侧边缘像素点。如果不存在纵轴坐标值相同的多个第三侧边缘像素点、且不存在纵轴坐标值相同的多个第四侧边缘像素点，则认为图像在竖直方向上对称。如果存在纵轴坐标值相同的多个第三侧边缘像素点、或者存在纵轴坐标值相同的多个第四侧边缘像素点，则认为图像在竖直方向上不对称。

在确定图像满足规则条件的情况下，可以在步骤S340中，提取该图像的样式。所提取的样式至少可以包括以下之一：图像的边框(border)、边框半径(border-radius)、背景色(background-color)等。本发明实施例对提取的样式不做限制，任何可以描述图像的样式均在本发明的保护范围之内。

例如，对于背景色来说，可以获取图像内部从左到右、从上到下的像素分布，如果各项像素方差小于给定的阈值(无波动)，则为纯色背景，直接提取某个像素值占比最大的值作为背景色。如果各项像素差值在一个轴(横轴或纵轴)符合线性差值，在另一个轴上各项像素方差为0(比如横轴像素值递增，纵轴像素值均等)，则为渐变色背景，可以依次提取两侧边缘中心像素值作为渐变色背景描述。

又例如，对于边框来说，可以将边缘检测后的边缘图像进行按位取反作为遮罩层，进一步与边缘检测后的边缘图像做按位与操作得到新图像，基于新图像来判断内部是否有轮廓(即新图像是否存在边缘)。如果新图像存在内部轮廓，则对内部轮廓的像素点做水平方向与竖直方向外部梯度根据中心点分成两个点集，判断轮廓点集组成是否符合点状线性分布，如果符合，则提取各线性分布点集的边框像素宽度以及像素值。

最后，可以在步骤S350中，基于提取到的图像的样式修改图层数据。例如，可以基于提取到的样式，修改图层数据中该图像对应的元素的类型和样式，并删除图层数据中该图像对应的元素的来源。即，将原本类型为图像的元素修正为采用其他类型来描述。例如，可以将该图像对应的元素的类型从图像(Image)修改为形状(Shape)，并重新分配标识。同时，将从图像中提取得到的样式添加到了该元素的样式(style)中，并删除该元素的来源(source)。

可以理解地，从设计稿中初步提取得到的图层数据通常会包括很多诸如背景色块之类的不必要采用图像类型来描述的元素，这种图像类型元素的大量存在会降低后续开发的性能，增加不必要的负荷。根据本发明实施例的图层数据处理方法300可以通过判断图像是否满足规则条件找出这些不必要采用图像类型描述的元素，并将其修正为采用诸如形状之类的其他类型来进行描述，为后续开发提供便利。

此外，考虑到在设计稿中，设计师有时会添加一些对最终布局和视觉没有影响的图层，也就是无用图层。因此，为了结构的合理性和精简性，需要对这部分图层进行筛除。

图6示出了根据本发明另一个实施例的设计稿的图层处理方法600的流程图。图层处理方法600适于在设计稿的图层处理装置800中执行，并用于筛除无用图层的图层数据。

如图6所示，图层处理方法600始于步骤S610。在步骤S610中，获取设计稿包括的至少一个图层的图层数据，并将设计稿所包括的至少一个图层的图层数据逐个进行绘制。该至少一个图层具有叠放顺序。

在步骤S620中，将所绘制的至少一个图层按叠放顺序叠放，得到最终图像。在步骤S630中，将最终图像与所绘制的各个图层进行比较。具体地，对于所绘制的各个图层，可以确定该图层的像素点在最终图像中的对应像素点，比较该图层的像素点与该对应像素点的像素值。如果该图层的各个像素点均与其在最终图像中的对应像素点的像素值不同，则可以在步骤S640中，删除该图层的图层数据。

如果该图层的至少部分像素点与其在最终图像中的对应像素点的像素值相同，则判断所绘制的至少一个图层中的顶层图层是否包括这至少部分像素点。如果包括，则删除该图层的图层数据，如果不包括，则不处理该图层及其图层数据。

其中，根据本发明的实施方式，还可以对于所绘制的各个图层，基于叠放顺序确定该图层的下一图层。此处的下一图层指的是叠放在该图层的下一层的图层。而后，可以比较该图层是否与其下一图层存在差异。

在一些实施例中，可以将该图层的像素点与其下一图层的像素点进行比较。例如，将该图层的像素点与该像素点在下一图层中的对应像素点进行比较。如果该图层的各个像素点均与该像素点在下一图像中的对应像素点的像素值相同，则该图层与该图层的下一图层不存在差异，可以认为该图层为无用图层，删除该图层及其图层数据。

如果该图层的任一像素点与该像素点在下一图层中的对应像素点的像素值不同，则该图层与该图层的下一图层存在差异。或者，如果该图层的某一像素点在下一图层中没有对应像素点，则该图层与该图层的下一图层存在差异。在该图层与该图层的下一图层存在差异的情况下，可以不处理该图层。

可以理解地，从设计稿中初步提取得到的图层数据通常会包括很多诸如重复或者后续会被覆盖掉的图层，根据本发明实施例的设计稿的图层处理方法600可以通过比较每次绘制的图层以及最终图像来找出这些无用图层，并将其删除，大大精简了图层数据，提高了图层数据的结构合理性。

综上所述，通常需要提前与设计师约定好规范或者协议，设计师按照该规范或者协议的约束来制作设计稿，才能在后续将图层数据还原为图形用户界面的过程中达到较好的还原效果。而根据本发明的设计稿的图层处理方法(例如图层处理方法300和/或600)利用计算机视觉能力对从设计稿里提取的图层数据进行修正处理，这样可以减少大部分对设计稿的约束，使得在不约定或者少约定协议或者规范的情况下，简便且较低成本地达到之前需要与设计师约定好协议或者规范才能达到的较优秀的设计稿数据描述。

图7示出了根据本发明一个实施例的设计稿的图层处理装置700的示意图。如图7所示，图层处理装置700可以包括图层获取单元710、图像获取单元720、边缘检测单元730、规则判断单元740、样式提取单元750以及数据修改单元760。

图层获取单元710适于获取设计稿包括的至少一个图层的图层数据。图像获取单元720与图层获取单元710相耦接，适于获取图层数据包含的图像。边缘检测单元730与图像获取单元720相耦接，适于对图层数据包含的图像进行边缘检测，得到边缘图像。规则判断单元740与边缘检测单元730相耦接，适于基于边缘图像判断图像是否满足规则条件。在图像满足规则条件的情况下，与图像获取单元720和规则判断单元740相耦接的样式提取单元750适于提取该图像的样式。最后，与样式提取单元750相耦接的数据修改单元760适于基于提取到的样式修改图层数据。

关于设计稿的图层处理装置700中各单元的详细处理逻辑和实施过程可以参见前文结合图1-图5对设计稿的图层处理方法300的相关描述，此处不再赘述。

图8示出了根据本发明一个实施例的设计稿的图层处理装置800的示意图。如图8所示，图层数据处理装置800可以包括图层获取单元810、图层绘制单元820、图层叠放单元830、图层比较单元840以及数据删除单元850。

图层获取单元810适于获取设计稿包括的至少一个图层的图层数据，至少一个图层具有叠放顺序。图层绘制单元820与图层获取单元810相耦接，适于将设计稿所包括的至少一个图层的图层数据进行绘制。图层叠放单元830与图层绘制单元820相耦接，适于将所绘制的至少一个图层按叠放顺序叠放，得到最终图像。图层比较单元840与图层绘制单元820和图层叠放单元830相耦接，适于将最终图像与所绘制的各个图层进行比较。对于各个图层，如果该图层的各个像素点均与该像素点在最终图像中的对应像素点的像素值不同，则与图层比较单元840相耦接的数据删除单元860可以删除该图层的图层数据。

关于设计稿的图层处理装置800中各单元的详细处理逻辑和实施过程可以参见前文结合图1-图6对设计稿的图层处理方法300以及设计稿的图层处理方法600的相关描述，此处不再赘述。

图9示出了根据本发明一个实施例的界面代码生成方法900的流程图。界面代码生成方法900适于在界面代码生成装置1000中执行。如图9所示，界面代码生成方法900始于步骤S910。

在S910中，可以对设计稿进行识别，以得到该设计稿所包括的至少一个图层的图层数据。例如，可以遍历设计稿包括的至少一个图层。对遍历到的各个图层，提取该图层所包含的元素的相关信息，以形成该图层的图层数据。而后在步骤S920中，对图层数据进行修正处理，例如可以采用设计稿的图层处理方法300和/或设计稿的图层处理方法600来对图层数据进行修正处理。最后在步骤S930中，可以基于修正处理后的图层数据生成设计稿对应的界面代码(例如HTML和CSS代码)。在一些实施例中，可以将图层数据与相应代码样板结合，得到界面代码。由于经过修正处理后的图层数据非常接近实际代码的描述，因此只需要很少且机械化的工作就能直接转化为界面代码，大大提高了效率。

关于界面代码生成方法900中各步骤的详细处理逻辑和实施过程可以参见前文结合图1-图6对界面代码生成系统100、设计稿的图层处理方法300以及设计稿的图层处理方法600的相关描述，此处不再赘述。

图10示出了根据本发明一个实施例的界面代码生成装置1000的示意图。界面代码生成装置1000可以驻留在服务器120中。如图10所示，界面代码生成装置1000可以包括图层识别单元1100、图层处理单元1200和代码生成单元1300。

图层识别单元1100适于对设计稿进行识别，得到设计稿的至少一个图层的图层数据。图层处理单元1200与图层识别单元1100相耦接，适于对设计稿的图层数据进行修正处理。例如图层处理单元1200可以实现为设计稿的图层处理装置700和/或设计稿的图层处理在800，分别采用设计稿的图层处理方法300和/或设计稿的图层处理方法600来对图层数据进行修正处理。代码生成单元1300与图层处理单元1200相耦接，适于基于修正处理后的图层数据生成设计稿对应的界面代码。

关于界面代码生成装置1000中各单元的详细处理逻辑和实施过程可以参见前文结合图1对界面代码生成系统100、以及图9对界面代码生成方法900的相关描述，此处不再赘述。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明实施例的方法和设备，或者本发明实施例的方法和设备的某些方面或部分可采取嵌入有形媒介，例如可移动硬盘、U盘、软盘、CD-ROM或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被机器执行时，该机器变成实践本发明实施例的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的程序代码中的指令，执行本发明实施例的方法。

以示例而非限制的方式，可读介质包括可读存储介质和通信介质。可读存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在可读介质的范围之内。

在此处所提供的说明书中，算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与本发明实施例的示例一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明实施例的内容，并且上面对特定语言所做的描述是为了披露本发明实施例的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明实施例的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明实施例的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明实施例要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明实施例的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所描述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明实施例的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

此外，上述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行上述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施上述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所描述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明实施例，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明实施例的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明实施例的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明实施例的范围，对本发明实施例所做的公开是说明性的而非限制性的，本发明实施例的范围由所附权利要求书限定。

Claims (26)

1.一种界面代码生成方法，包括：

对设计稿进行识别，得到所述设计稿的图层的图层数据；

对所述设计稿的图层数据进行修正处理；以及

基于修正处理后的图层数据生成所述设计稿对应的界面代码。

2.如权利要求1所述的方法，其中，对设计稿进行识别的步骤包括：

遍历所述设计稿包括的至少一个图层；

对遍历到的图层，提取所述图层所包含的元素的相关信息，以形成所述图层的图层数据。

3.如权利要求1所述的方法，其中，对所述设计稿的图层数据进行修正处理的步骤包括：

获取所述图层数据包含的图像；

对所述图像进行边缘检测，得到边缘图像；

基于所述边缘图像判断所述图像是否满足规则条件；

在所述图像满足规则条件的情况下，提取所述图像的样式；

基于提取到的所述样式修改所述图层数据。

4.如权利要求3所述的方法，其中，基于所述边缘图像判断所述图像是否满足规则条件的步骤包括：

基于所述边缘图像，判断所述图像是否在水平方向和/或竖直方向上对称；

如果所述图像在水平方向和竖直方向上均对称，则所述图像满足规则条件。

5.如权利要求4所述的方法，其中，基于所述边缘图像，判断所述图像是否在水平方向上对称的步骤包括：

获取所述边缘图像的第一侧边缘像素点；

判断是否存在横轴坐标值相同的多个所述第一侧边缘像素点；

如果存在，则所述图像在水平方向不对称。

6.如权利要求4所述的方法，其中，基于所述边缘图像，判断所述图像是否在水平方向上对称的步骤包括：

获取所述边缘图像的第二侧边缘像素点；

判断是否存在横轴坐标值相同的多个所述第二侧边缘像素点；

如果存在，则所述图像在水平方向不对称。

7.如权利要求5或6所述的方法，其中，基于所述边缘图像，判断所述图像是否在水平方向上对称的步骤还包括：

如果不存在横轴坐标值相同的多个所述第一侧边缘像素点、且不存在横轴坐标值相同的多个所述第二侧边缘像素点，则所述图像在水平方向上对称。

8.如权利要求5或6所述的方法，其中，获取所述边缘图像的所述第一侧边缘像素点或者所述第二侧边缘像素点的步骤包括：

基于水平方向，将所述边缘图像划分为第一侧区域和第二侧区域；

基于所述边缘图像位于所述第一侧区域的部分，获取所述图像的第一侧边缘像素点，相邻第一侧边缘像素点的横轴坐标值不同；或者

基于所述边缘图像位于所述第二侧区域的部分，获取所述图像的第二侧边缘像素点，相邻第二侧边缘像素点的横轴坐标值不同。

9.如权利要求4所述的方法，其中，基于所述边缘图像，判断所述图像是否在竖直方向上对称的步骤包括：

获取所述边缘图像的第三侧边缘像素点；

判断是否存在纵轴坐标值相同的多个所述第三侧边缘像素点；

如果存在，则所述图像在竖直方向不对称。

10.如权利要求4所述的方法，其中，基于所述边缘图像，判断所述图像是否在竖直方向上对称的步骤包括：

获取所述边缘图像的第四侧边缘像素点；

判断是否存在纵轴坐标值相同的多个所述第四侧边缘像素点；

如果存在，则所述图像在竖直方向上不对称。

11.如权利要求9或10所述的方法，其中，基于所述边缘图像，判断所述图像是否在竖直方向上对称的步骤还包括：

如果不存在纵轴坐标值相同的多个所述第三侧边缘像素点、且不存在纵轴坐标值相同的多个所述第四侧边缘像素点，则所述图像在竖直方向上对称。

12.如权利要求9或10所述的方法，其中，获取所述边缘图像的所述第三侧边缘像素点或者所述第四侧边缘像素点的步骤包括：

基于竖直方向，将所述边缘图像划分为第三侧区域和第四侧区域；

基于所述边缘图像位于所述第三侧区域的部分，获取所述图像的第三侧边缘像素点，相邻第三侧边缘像素点的纵轴坐标值不同；或者

基于所述边缘图像位于所述第四侧区域的部分，获取所述图像的第四侧边缘像素点，相邻第四侧边缘像素点的纵轴坐标值不同。

13.如权利要求3所述的方法，其中，获取所述图层数据包含的所述图像的步骤包括：

查找所述图层数据中类型为图像的元素；

基于所述图层数据中所述元素的来源获取所述图像。

14.如权利要求3所述的方法，其中，基于提取到的所述样式修改所述图层数据的步骤包括：

基于提取到的所述样式，修改所述图层数据中所述图像对应的元素的类型和样式，并删除所述图层数据中所述图像对应的元素的来源。

15.如权利要求3所述的方法，其中，所述图像的样式至少包括以下之一：边框、边框半径、背景色。

16.如权利要求1所述的方法，还包括：

将所述设计稿的至少一个图层的图层数据逐个进行绘制，所述至少一个图层具有叠放顺序；

将所绘制的所述至少一个图层按叠放顺序叠放，得到最终图像；

将所述最终图像与所绘制的各个图层进行比较；

如果所述图层的各个像素点均与其在所述最终图像中的对应像素点的像素值不同，则删除所述图层的图层数据。

17.如权利要求16所述的方法，还包括：

如果所述图层的至少部分像素点与其在所述最终图像中的对应像素点的像素值相同，则判断顶层图层是否包括所述至少部分像素点；

如果包括，则删除所述图层的图层数据。

18.如权利要求16所述的方法，还包括：

对于所绘制的各个图层，基于叠放顺序确定所述图层的下一图层；

比较所述图层与所述下一图层是否存在差异；

如果不存在差异，则删除所述图层及其图层数据。

19.如权利要求17所述的方法，其中，比较所述图层与所述下一图层是否存在差异的步骤包括：

将所述图层的像素点与其在所述下一图层中的对应像素点进行比较；

如果所述图层的各个像素点均与所述对应像素点的像素值相同，则所述图层与所述下一图层不存在差异；

如果所述图层的任一像素点与所述对应像素点的像素值不同，则所述图层与所述下一图层存在差异。

20.一种设计稿的图层处理方法，包括：

获取所述设计稿包括的至少一个图层的图层数据；

获取所述图层数据包含的图像；

对所述图像进行边缘检测，得到边缘图像；

基于所述边缘图像判断所述图像是否满足规则条件；

在所述图像满足规则条件的情况下，提取所述图像的样式；以及

基于提取到的所述样式修改所述图层数据。

21.一种设计稿的图层处理方法，包括：

获取所述设计稿包括的至少一个图层的图层数据，所述至少一个图层具有叠放顺序；

将所述至少一个图层的图层数据逐个进行绘制；

将所绘制的所述至少一个图层按叠放顺序叠放，得到最终图像；

将所述最终图像与所绘制的各个图层进行比较；以及

如果所述图层的各个像素点均与其在所述最终图像中的对应像素点的像素值不同，则删除所述图层的图层数据。

22.一种界面代码生成装置，包括：

图层识别单元，适于对设计稿进行识别，得到所述设计稿的图层的图层数据；

图层处理单元，适于对所述设计稿的图层数据进行修正处理；以及

代码生成单元，适于基于修正处理后的图层数据生成所述设计稿对应的界面代码。

23.一种设计稿的图层处理装置，包括：

图层获取单元，适于获取所述设计稿包括的至少一个图层的图层数据；

图像获取单元，适于获取所述图层数据包含的图像；

边缘检测单元，适于对所述图像进行边缘检测，得到边缘图像；

规则判断单元，适于基于所述边缘图像判断所述图像是否满足规则条件；

样式提取单元，适于在所述图像满足规则条件的情况下，提取所述图像的样式；以及

数据修改单元，适于基于提取到的所述样式修改所述图层数据。

24.一种设计稿的图层处理装置，包括：

图层获取单元，适于获取所述设计稿包括的至少一个图层的图层数据，所述至少一个图层具有叠放顺序；

图层绘制单元，适于将至少一个图层的图层数据进行绘制；

图层叠放单元，适于将所绘制的所述至少一个图层按叠放顺序叠放，得到最终图像；

图层比较单元，适于将所述最终图像与所绘制的各个图层进行比较；以及

数据删除单元，适于如果所述图层的各个像素点均与其在所述最终图像中的对应像素点的像素值不同，则删除所述图层的图层数据。

25.一种计算设备，包括：

一个或多个处理器；和

存储器；

一个或多个程序，其中所述一个或多个程序存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序包括用于执行根据权利要求1-21所述的方法中任一方法的指令。

26.一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当计算设备执行时，使得所述计算设备执行根据权利要求1-21所述的方法中任一方法。

Images