图层导出方法、装置、设备及存储介质与流程

[0001]
本申请涉及ui设计领域，特别涉及一种图层导出方法、装置、设备及存储介质。


背景技术：

[0002]
设计人员可以使用矢量设计工具来设计应用程序的ui(user interface，用户界面)，比如，sketch(bohemian coding公司出品的矢量设计工具)、photoshop(adobe公司出品的矢量设计工具)。
[0003]
在设计人员使用矢量设计工具设计出ui界面的视觉稿文件后，将ui界面的视觉稿文件提供给前端开发人员作为开发根基。在视觉稿文件上存在两种视觉元素：可由代码构建的第一视觉元素和不可由代码构建的第二视觉元素。对于第一视觉元素，由前端开发人员通过编程代码来实现，比如按钮；对于第二视觉元素，设计人员或开发人员会导出该第二视觉元素对应的图层，比如宣传海报图片，在ui界面的代码中声明图层节点和对应的统一资源定位符(uniform resource identifier，uri)来实现。也即，将第二视觉元素对应的图层作为一种图层节点，添加在代码中。
[0004]
上述导出第二视觉元素的图层的过程，称为切图。该切图过程主要由设计人员或开发人员依据个人经验来手动实现，不仅容易出错且效率较低。


技术实现要素：

[0005]
本申请提供了一种图层导出方法、装置、设备及存储介质，提供了一种无需用户手动操作，即可全自动导出切图的技术方案。所述技术方案如下：
[0006]
根据本申请的一方面，提供了一种图层导出方法，所述方法包括：
[0007]
获取用户界面的视觉稿文件的节点树，所述节点树包括视觉元素节点，所述视觉元素节点与构成所述用户界面的视觉元素的图层对应；
[0008]
确定所述节点树中不支持代码构建的视觉元素节点；
[0009]
对不支持代码构建的视觉元素节点中属于同一层级的视觉元素节点进行合并，得到合并后的视觉元素节点；
[0010]
将所述合并后的视觉元素节点对应的图层，导出为第一切图图层。
[0011]
根据本申请的另一方面，提供了一种图层导出装置，所述装置包括：
[0012]
获取模块，用于获取用户界面的视觉稿文件的节点树，所述节点树包括视觉元素节点，所述视觉元素节点与构成所述用户界面的视觉元素的图层对应；
[0013]
确定模块，用于确定所述节点树中不支持代码构建的视觉元素节点；
[0014]
合并模块，用于对不支持代码构建的视觉元素节点中属于同一层级的视觉元素节点进行合并，得到合并后的视觉元素节点；
[0015]
导出模块，用于将所述合并后的视觉元素节点对应的图层，导出为第一切图图层。
[0016]
在一个可选的设计中，所述合并模块，用于：
[0017]
对不支持代码构建的视觉元素节点中符合合并条件的视觉元素节点进行合并，得
到合并后的视觉元素节点；
[0018]
其中，所述合并条件用于评判两个视觉元素节点是否属于同一层级。
[0019]
在一个可选的设计中，所述合并条件包括如下至少之一：
[0020]
两个视觉元素节点对应的图层属于同一个切片组；
[0021]
两个视觉元素节点对应的图层之间的颜色相似度达到第一阈值；
[0022]
两个视觉元素节点对应的图层的相交程度大于第二阈值；
[0023]
两个视觉元素节点在所述节点树中属于同一个目录层级。
[0024]
在一个可选的设计中，被合并的所述视觉元素节点还符合如下条件：
[0025]
所述视觉元素节点对应的图层的面积小于第三阈值。
[0026]
在一个可选的设计中，所述确定模块，用于：
[0027]
过滤所述节点树中支持代码构建的视觉元素节点，得到所述节点树中不支持代码构建的视觉元素节点。
[0028]
在一个可选的设计中，所述确定模块，用于：
[0029]
过滤所述节点树中符合过滤条件的视觉元素节点，得到所述节点树中不支持代码构建的视觉元素节点；所述过滤条件包括如下至少之一：
[0030]
属于无样式的文字节点；
[0031]
属于直线节点；
[0032]
属于指定形状的图形节点。
[0033]
在一个可选的设计中，所述装置还包括：
[0034]
添加模块，用于在所述节点树中对所述合并后的视觉元素节点添加目标标识；
[0035]
所述导出模块，用于：
[0036]
将所述节点树中具有所述目标标识的视觉元素节点对应的图层，导出为所述第一切图图层。
[0037]
在一个可选的设计中，所述导出模块，用于：
[0038]
将所述不支持代码构建的视觉元素节点中未进行合并的视觉元素节点对应的图层，导出为第二切图图层。
[0039]
根据本申请的另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上方面所述的图层导出方法。
[0040]
根据本申请的另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条程序代码，所述程序代码由处理器加载并执行以实现如上方面所述的图层导出方法。
[0041]
根据本申请的另一方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述方面的各种可选实现方式中提供的图层导出方法。
[0042]
本申请提供的技术方案带来的有益效果至少包括：
[0043]
通过确定出节点树中不支持代码构建的视觉元素节点，并将其中属于同一层级的
视觉元素节点进行合并，之后导出合并后的视觉元素节点对应的图层，得到切图图层，从而实现切图。在实现切图的过程中，无需人工进行操作，只需通过计算机设备处理视觉稿文件的节点树，就能够实现导出切图图层。能够避免人工操作带来的容易出错且效率较低的问题，提供了一种全自动导出切图的技术方案。
附图说明
[0044]
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0045]
图1是本申请实施例提供的图层导出的原理示意图；
[0046]
图2是本申请实施例提供的一种图层导出方法的流程示意图；
[0047]
图3是本申请实施例提供的另一种图层导出方法的流程示意图；
[0048]
图4是本申请实施例提供的属于同一个切片组的视觉元素节点的示意图；
[0049]
图5是本申请实施例提供的确定两个图层之间的颜色相似度是否达到第一阈值的示意图；
[0050]
图6是本申请实施例提供的确定两个图层之间的相交程度是否达到第二阈值的示意图；
[0051]
图7是本申请实施例提供的属于同一个目录层级的视觉元素节点的示意图；
[0052]
图8是本申请实施例提供的一种图层导出装置的结构示意图；
[0053]
图9是本申请实施例提供的另一种图层导出装置的结构示意图；
[0054]
图10是本申请实施例提供的一种服务器的结构示意图。
[0055]
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
具体实施方式
[0056]
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
[0057]
图1是本申请实施例提供的图层导出的原理示意图。如图1所示，在步骤101中，计算机设备获取视觉稿文件的节点树。该视觉稿文件被用于开发用户界面。该节点树包括视觉元素节点，该视觉元素节点与视觉稿文件中构成用户界面的视觉元素的图层对应。在步骤102中，计算机设备剔除节点树中支持代码构建的视觉元素节点，从而得到节点树中不支持代码构建的视觉元素节点。计算机设备通过遍历节点树中的全部视觉元素节点，并将满足过滤条件的视觉元素节点剔除，从而得到更新后的节点树，该更新后的节点树包括不支持代码构建的视觉元素节点。该过滤条件用于反映视觉元素节点对应的图层的视觉元素能够通过代码实现，例如过滤条件包括视觉元素节点属于无样式的文字节点，视觉元素节点属于直线节点，以及，视觉元素节点属于指定形状的图形节点中的至少之一。该指定形状包括圆形以及矩形，且该圆形以及矩形未发生形变。在步骤103中，计算机设备合并属于同一层级的视觉元素节点。该同一层级指视觉元素节点对应的图层属于同一切图图层，计算机
设备根据属于同一切图图层的视觉元素节点的图层能够导出切图。计算机设备通过判断不支持代码构建的视觉元素节点中的任意两个视觉元素节点，是否满足合并条件，并将满足合并条件的两个视觉元素节点进行合并，作为一个切图图层的节点。从而得到更新后的包括至少一个切图图层的节点的节点树。该合并条件包括两个视觉元素节点对应的图层属于同一个切片组，两个视觉元素节点对应的图层颜色相似度达到第一阈值，两个视觉元素节点对应的图层的相交程度大于第二阈值，以及，两个视觉元素节点在节点树中属于同一个目录层级中的至少之一。可选地，被合并的视觉元素节点还符合视觉元素节点对应的图层的面积小于第三阈值。在步骤104中，计算机设备根据剔除以及合并视觉元素节点后的节点树，导出切图图层。可选地，计算机设备在合并视觉元素节点时，会为合并后的视觉元素节点添加目标标识，之后将具有该目标标识的视觉元素节点对应的图层导出为切图图层，从而实现切图。
[0058]
采用上述方式进行切图时，无需人工进行操作，只需通过计算机设备根据过滤条件以及合并条件处理视觉稿文件的节点树，就能够实现导出切图图层。能够避免人工操作带来的容易出错且效率较低的问题，提供了一种全自动导出切图的技术方案。
[0059]
图2是本申请实施例提供的一种图层导出方法的流程示意图。该方法可以用于计算机设备或计算机设备上的客户端。如图2所示，该方法包括：
[0060]
步骤201：获取用户界面的视觉稿文件的节点树。
[0061]
该用户界面包括计算机设备的系统界面，以及计算机设备上安装的应用程序(application)中的界面。例如为社交客户端、金融客户端、游戏客户端以及歌曲客户端中的界面。该视觉稿文件与用户界面对应，开发人员根据该视觉稿文件能够通过编程代码实现该用户界面。该视觉稿文件的格式包括“.sketch”、“.psd”以及“.xd”。其中，通过sketch输出的视觉稿文件的格式为“.sketch”。通过photoshop输出的视觉稿文件的格式为“.psd”。通过adobe xd(adobe出品的矢量设计工具)输出的视觉稿文件的格式为“.xd”。
[0062]
在视觉稿文件中，视觉元素被绘制于图层中。视觉元素节点与构成用户界面的视觉元素的图层对应。该视觉元素节点包括图层组节点(包括至少一个视觉元素节点)、图片节点(视觉元素为图片)、形状节点(视觉元素为形状)以及文字节点(视觉元素为文字)中的至少一种。节点树包括视觉元素节点，该节点树能够反映视觉元素节点之间的结构关系，即视觉元素节点对应的图层之间的结构关系。该节点树还包括每个视觉元素节点对应的图层的属性、类型以及样式等。
[0063]
步骤202：确定节点树中不支持代码构建的视觉元素节点。
[0064]
该不支持代码构建的视觉元素节点，指开发人员无法通过编程代码实现的视觉元素的图层，所对应的视觉元素节点。例如包括页面背景图、虚拟头像以及特殊字体的文字等对应的视觉元素节点。
[0065]
可选地，计算机设备通过过滤掉节点树中支持代码构建的视觉元素节点，从而得到该不支持代码构建的视觉元素节点。该支持代码构建的视觉元素节点包括无样式的文字的节点，直线的节点以及指定形状的图形节点。该指定形状包括圆形以及矩形，且该圆形以及矩形未发生形变。
[0066]
步骤203：对不支持代码构建的视觉元素节点中属于同一层级的视觉元素节点进行合并，得到合并后的视觉元素节点。
[0067]
该同一层级指视觉元素节点对应的图层属于同一切图图层，计算机设备根据属于同一切图图层的视觉元素节点的图层能够导出切图。
[0068]
计算机设备通过判断不支持代码构建的视觉元素节点中的任意两个视觉元素节点，是否符合合并条件，并将符合合并条件的两个视觉元素节点进行合并，作为一个切图图层的节点。从而得到更新后的包括至少一个切图图层的节点的节点树。
[0069]
可选地，合并条件包括：两个视觉元素节点对应的图层属于同一个切片组，两个视觉元素节点对应的图层颜色相似度达到第一阈值，两个视觉元素节点对应的图层的相交程度大于第二阈值，以及，两个视觉元素节点在节点树中属于同一个目录层级中的至少之一。可选地，被合并的视觉元素节点还符合视觉元素节点对应的图层的面积小于第三阈值。
[0070]
步骤204：将合并后的视觉元素节点对应的图层，导出为第一切图图层。
[0071]
计算机设备合并视觉元素节点，能够更新节点树。计算机设备根据更新后的节点树导出第一切图图层时，被合并的视觉元素节点能够指示计算机设备将视觉元素节点对应的图层合并，导出为同一个切图图层，从而实现切图。
[0072]
示例地，对于格式为“.sketch”的视觉稿文件，计算机设备能够通过设计该视觉稿文件的矢量设计工具中的组件，实现导出第一切图图层。
[0073]
综上所述，本申请实施例提供的方法，确定出节点树中不支持代码构建的视觉元素节点，并将其中属于同一层级的视觉元素节点进行合并，之后导出合并后的视觉元素节点对应的图层，得到切图图层，从而实现切图。在实现切图的过程中，无需人工进行操作，只需通过计算机设备处理视觉稿文件的节点树，就能够实现导出切图图层。能够避免人工操作带来的容易出错且效率较低的问题，提供了一种全自动导出切图的技术方案。
[0074]
图3是本申请实施例提供的另一种图层导出方法的流程示意图。该方法可以用于计算机设备或计算机设备上的客户端。如图3所示，该方法包括：
[0075]
步骤301：获取用户界面的视觉稿文件的节点树。
[0076]
该用户界面包括计算机设备的系统界面，以及计算机设备上安装的应用程序(application)中的界面。该视觉稿文件与用户界面对应，开发人员根据该视觉稿文件能够通过编程代码实现该用户界面。该视觉稿文件是开发人员或设计人员在计算机设备中上传的。该视觉稿文件的格式包括“.sketch”、“.psd”以及“.xd”。
[0077]
该节点树包括视觉元素节点，视觉元素节点与构成用户界面的视觉元素的图层对应。该视觉元素节点包括图层组节点、图片节点、形状节点以及文字节点中的至少一种。该节点树包括视觉元素节点，视觉元素节点与构成用户界面的视觉元素的图层对应。该节点树能够反映视觉元素的图层之间的结构关系。该节点树还包括每个视觉元素节点对应的图层的属性、类型以及样式等。
[0078]
对于文本节点类型，属性为文本的内容，样式包括文字大小、字体、行高、颜色、是否加粗等。
[0079]
对于图片节点类型，属性为图片的路径，样式包括图片的宽高、背景、是否为圆角、是否有边框等。
[0080]
对于图形节点类型，属性为指示形状的标识以及路径，样式包括图形的宽高、背景、是否为圆角、是否有边框等。
[0081]
计算机设备根据获取到的该视觉稿文件，能够确定出视觉稿文件的节点树。例如，
该视觉稿文件的格式为“.sketch”，计算机设备通过解压该视觉稿文件，能够得到包括该视觉稿文件的节点树的js对象简谱(javascript object notation，json)文件。在该json文件中，图层组节点的标识为layer，图片节点的标识为image，形状节点的标识为rectangle及oval等，文字节点的标识为text。对于格式为“.psd”和“.xd”的视觉稿文件，计算机设备能够通过视觉稿文件的格式对应的节点树导出插件导出节点树，例如psd.js插件。
[0082]
步骤302：确定节点树中不支持代码构建的视觉元素节点。
[0083]
该不支持代码构建的视觉元素节点，指开发人员无法通过编程代码实现的视觉元素的图层，所对应的视觉元素节点。例如包括页面背景图、虚拟头像以及特殊字体的文字等对应的视觉元素节点。可选地，计算机设备通过过滤节点树中支持代码构建的视觉元素节点，从而能够得到节点树中不支持代码构建的视觉元素节点。具体地，计算机设备过滤节点树中符合过滤条件的视觉元素节点，从而得到节点树中不支持代码构建的视觉元素节点。该过滤条件用于评判视觉元素节点是否支持通过代码构建。该过滤条件包括如下至少之一：
[0084]
·
属于无样式的文字节点；
[0085]
·
属于直线节点；
[0086]
·
属于指定形状的图形节点。
[0087]
其中，属于无样式的文字节点指视觉元素节点对应的图层中的视觉元素为文字，且该文字无特殊样式。该特殊样式是指无法通过代码实现的文字样式，例如特殊字体以及艺术字。属于直线节点指视觉元素节点对应的图层中的视觉元素为直线。属于指定形状的图形节点指视觉元素节点对应的图层中的视觉元素为指定形状，该指定形状包括圆形以及矩形，且该圆形以及矩形未发生形变。
[0088]
示例地，计算机设备通过如下代码判定节点树中的视觉元素节点是否属于无样式的文字节点：
[0089]
[0090]
其中，“node.styles.border”，“node.styles.shadows”，“node.styles.background”以及“node.styles.background&&node.styles.background.type＝＝＝'color'”用于从节点树中过滤出无边框(border)、无投影(shadows)、无背景(background)以及无背景颜色的文字的视觉元素节点，从而得到属于无样式的文字节点的视觉元素节点。
[0091]
计算机设备通过如下代码判定节点树中的视觉元素节点是否属于直线节点：
[0092]
private static isline(node：qobject)：boolean{
[0093]
return node.width>50&&node.height<＝2；
[0094]
}
[0095]
其中，“node.width>50”以及“node.height<＝2”用于从节点树中过滤出长度大于50且高度小于2的图层的视觉元素节点，从而得到属于直线节点的视觉元素节点。
[0096]
计算机设备通过如下代码判定节点树中的视觉元素节点是否属于指定形状的图形节点：
[0097][0098]
[0099]
其中，“//非四边形”，“//四边形但是边角被修改过”以及“如果是渐变的边框”对应的代码，用于从节点树中过滤出四边形、边角未被修改过以及无渐变的边框的矩形和圆形的视觉元素节点，从而得到属于指定形状的图形节点的视觉元素节点。
[0100]
计算机设备通过如下代码对完成是否符合过滤条件判定的视觉元素节点进行过滤：
[0101][0102][0103]
其中，“//无样式的文字节点”，“//直线”以及“//常规图形节点”对应的代码，用于从节点树中剔除被判定为属于无样式的文字节点，属于直线节点或属于指定形状的图形节点的视觉元素节点，从而能够得到包括不支持代码构建的视觉元素节点的节点树，也即是能够得到不支持代码构建的视觉元素节点。
[0104]
需要说明的是，计算机设备通过运行node插件(node.js)实现上述确定节点树中不支持代码构建的视觉元素节点，该node插件中具有上述代码。计算机设备能够根据上述全部过滤条件或部分过滤条件确定节点树中不支持代码构建的视觉元素节点。并且，开发人员还能够根据实际情况修改上述过滤条件，例如增加新的过滤条件，使得计算机设备确定节点树中不支持代码构建的视觉元素节点的准确性提高。
[0105]
步骤303：对不支持代码构建的视觉元素节点中属于同一层级的视觉元素节点进行合并，得到合并后的视觉元素节点。
[0106]
该同一层级指视觉元素节点对应的图层属于同一切图图层，计算机设备根据属于
同一切图图层的视觉元素节点的图层能够导出切图。可选地，计算机设备对不支持代码构建的视觉元素节点中符合合并条件的视觉元素节点进行合并，得到合并后的视觉元素节点。计算机设备将合并后的视觉元素节点作为一个切图图层的节点，从而能够得到更新后的包括至少一个切图图层的节点的节点树。其中，合并条件用于评判两个视觉元素节点是否属于同一层级。可选地，合并条件包括如下至少之一：
[0107]
·
两个视觉元素节点对应的图层属于同一个切片组；
[0108]
·
两个视觉元素节点对应的图层之间的颜色相似度达到第一阈值；
[0109]
·
两个视觉元素节点对应的图层的相交程度大于第二阈值；
[0110]
·
两个视觉元素节点在节点树中属于同一个目录层级。
[0111]
针对判断两个视觉元素节点对应的图层是否属于同一个切片组：
[0112]
设计人员在设计视觉稿文件时，通常会对设计稿文件中的图层进行标注，该标注用于反映图层所属的切片组。该标注的规则由开发人员输入在计算机设备中，计算机设备能够根据该标注的规则确定不支持代码构建的视觉元素节点中，属于同一个切片组的视觉元素节点，并进行合并。
[0113]
示例地，图4是本申请实施例提供的属于同一个切片组的视觉元素节点的示意图。如图4所示，用于设计视觉稿文件的矢量设计工具的用户界面401中，包括图层预览区域402以及图层对应的节点树预览区域403。第一图层404与第一视觉元素405对应，第二图层405与第二视觉元素406对应。设计人员将第一图层404与第二图层405标注为属于同一切片组。则计算机设备在合并视觉元素节点时，会将第一图层404与第二图层405对应的视觉元素节点进行合并。
[0114]
针对判断两个视觉元素节点对应的图层之间的颜色相似度是否达到第一阈值：
[0115]
对于图层的颜色相同或非常相似的两个视觉元素节点，通常能够被导出为同一个切图图层。例如组成一个纯色图标的多个图层，每个图层的视觉元素的颜色都相同。计算机设备确定两个视觉元素节点对应的图层之间的颜色相似度，当达到第一阈值时合并两个视觉元素节点。可选地，计算机设备根据两个图层对应的颜色值的方差的和，确定该颜色相似度。当颜色相似度小于或等于第一阈值时，确定颜色相似度达到第一阈值。该第一阈值是开发人员确定的，第一阈值越大，两个视觉元素节点被合并的可能性越高；第一阈值越小，两个视觉元素节点被合并的可能性越低。示例地，第一图层对应的颜色值(rgb)为r＝r1，g＝g1，b＝b1，第二图层对应的颜色值为r＝r2，g＝g2，b＝b2，则计算机设备确定的第一图层与第二图层之间的颜色相似度为(r1-r2)2+(g1-g2)2+(b1-b2)2。可选地，当视觉元素节点对应的图层的视觉元素颜色为渐变色时，计算机设备将渐变色颜色值的平均值确定为图层的颜色值。例如渐变色颜色值为from(0，0，0)to(240，240，240)，则计算机设备确定的颜色值为r＝(0+240)/2，g＝(0+240)/2，b＝(0+240)/2。可选地，若视觉元素节点对应的图层为图片、图层无颜色属性，则计算机设备通过确定两图层的颜色复杂度的相似度确定是否合并两个视觉元素节点。颜色复杂度指图层的视觉元素包含的颜色丰富度。计算机设备根据两图层包括的颜色的数量以及颜色值确定该颜色复杂度的相似度，颜色的数量越相近，相同的颜色值越多，计算机设备合并两个视觉元素节点的可能性越高。
[0116]
示例地，图5是本申请实施例提供的确定两个图层之间的颜色相似度是否达到第一阈值的示意图。如图5所示，第一图层组501中的三个图层的视觉元素，组成动漫图标502。
其中，第一图层组501中的三个图层的颜色相同。第二图层组503中的三个图层的视觉元素，组成音乐图标504。其中，第二图层组503中的三个图层的颜色相同。计算机设备在合并视觉元素节点时，会将第一图层组501中的三个图层分别对应的视觉元素节点进行合并。会将第二图层组503中的三个图层分别对应的视觉元素节点进行合并。
[0117]
针对判断两个视觉元素节点对应的图层的相交程度是否大于第二阈值：
[0118]
对于图层存在相交情况的两个视觉元素节点，通常能够被导出为同一个切图图层。两个图层相交的面积越大，计算机设备合并该两个图层对应的视觉元素节点的可能性越高。当两个视觉元素节点对应的图层的相交程度大于第二阈值，计算机设备会合并该两个视觉元素节点。该相交程度是通过确定两个图层的距离或相交部分的面积确定的。当两个图层不存在相交部分时，两图层的距离越近，则相交程度越大；当两个图层存在相交部分时，两图层的相交部分的面积越大，则相交程度越大。该第二阈值是开发人员确定的，对于两个图层不存在相交部分以及两个图层存在相交部分这两种情况，可以分别设置第二阈值。即当两个图层不存在相交部分，且两图层的距离小于衡量距离的第二阈值时，计算机设备确定两个图层的相交程度大于第二阈值。当两个图层存在相交部分，且两图层的相交部分的面积大于衡量相交面积的第二阈值时，计算机设备确定两个图层的相交程度大于第二阈值。示例地，图6是本申请实施例提供的确定两个图层之间的相交程度是否达到第二阈值的示意图。如图6的(a)所示，第一图层601外的虚线框表示第二阈值，第二图层602与虚线框的所在区域相交，此时第一图层601和第二图层602的相交程度大于第二阈值。如图6的(b)所示，第二图层602与虚线框的所在区域未相交，此时第一图层601和第二图层602的相交程度小于第二阈值。
[0119]
针对判断两个视觉元素节点在节点树中是否属于同一个目录层级：
[0120]
设计人员在设计视觉稿文件时，通常会将需要合并的图层放置在同一个目录层级中。计算机设备将节点树中属于同一个目录层级两个视觉元素节点进行合并，能够实现自动合并需要合并的视觉元素节点。两个视觉元素节点属于同一个目录层级，指两个视觉元素节点在节点树中的父节点相同。另外，对于不属于同一个目录层级两个视觉元素节点，计算机设备会确定该两个视觉元素节点在节点树中的最小公共父节点，并确定两个视觉元素节点之间的层极差。两个视觉元素节点之间的层级差越小，计算机设备合并该两个视觉元素节点的可能性越高。例如第一视觉元素节点和第二视觉元素节点的公共父节点为第三视觉元素节点，第一视觉元素节点与第三视觉元素节点的层级差为一级(第三视觉元素节点为第一视觉元素节点的父节点)，第二视觉元素节点与第三视觉元素节点的层级差为四级，则第一视觉元素节点和第二视觉元素节点之间的层级差为三级。
[0121]
示例地，图7是本申请实施例提供的属于同一个目录层级的视觉元素节点的示意图。如图7所示，图层组701中的六个图层的视觉元素，共同组成背景图702。计算机设备在合并视觉元素节点时，由于图层组701中的六个图层属于同一个目录层级，计算机设备会将该六个图层分别对应的视觉元素节点进行合并。
[0122]
可选地，被合并的视觉元素节点还符合如下条件：
[0123]
·
视觉元素节点对应的图层的面积小于第三阈值。
[0124]
对于需要进行合并的视觉元素节点，其对应的图层的面积通常有限，该第三阈值是开发人员根据设计稿文件中的视觉元素的尺寸确定的，例如为35*35。
[0125]
需要说明的是，计算机设备按照上述说明中的顺序判断两个视觉元素节点是否符合合并条件，或者按照其它顺序判断两个视觉元素节点是否符合合并条件。并且，计算机设备在判断两个视觉元素节点是否符合合并条件的过程中，还会判断视觉元素节点对应的图层的面积是否小于第三阈值，从而综合确定是否合并两个视觉元素节点。另外，计算机设备还能根据每条合并条件，为两个视觉元素节点进行合并打分，例如图层颜色越相似的两个视觉元素节点其合并打分越高。之后再与视觉元素节点对应的图层的面积的打分相加。例如图层面积越小打分越高。最后得到两个视觉元素节点的合并打分，当合并打分高于打分阈值时，计算机设备确定将两个视觉元素节点合并。在合并视觉元素节点的过程中，计算机设备还会将已合并的视觉元素节点与其它视觉元素节点继续合并，直至节点树中的任一两视觉元素节点无法继续合并。并且，开发人员还能够根据实际情况修改上述合并条件，例如增加新的合并条件，使得计算机设备确定节点树中需要进行合并的视觉元素节点的准确性提高。可选地，计算机设备通过运行node插件实现上述合并视觉元素节点的过程，该node插件与确定节点树中不支持代码构建的视觉元素节点所使用的node插件为同一插件或不同插件。
[0126]
步骤304：将合并后的视觉元素节点对应的图层，导出为第一切图图层。
[0127]
计算机设备合并视觉元素节点，能够更新节点树。计算机设备根据更新后的节点树导出第一切图图层时，被合并的视觉元素节点能够指示计算机设备将该被合并的视觉元素节点对应的图层合并，导出为同一个切图图层，从而实现切图。可选地，计算机设备在节点树中会对合并后的视觉元素节点添加目标标识，并将节点树中具有目标标识的视觉元素节点对应的图层，导出为第一切图图层。该目标标识用于指示计算机设备将视觉元素节点对应的图层合并，并导出为同一个切图图层。该目标标识是根据导出切图图层使用的插件识别切图图层的规则确定的。
[0128]
示例地，计算机设备通过如下代码将合并后的视觉元素节点对应的图层进行导出：
[0129][0130]
其中，上述代码是通过生成格式为“.sketch”的视觉稿文件的矢量设计工具中的插件运行的。计算机设备通过上述代码，能够将具有相同标识的一组图层导出为一个切图图层。即将具有相同标识的一组图层进行叠加，并将叠加得到的图层输出为图片(例如.png)，从而实现切图。
[0131]
步骤305：将不支持代码构建的视觉元素节点中未进行合并的视觉元素节点对应
的图层，导出为第二切图图层。
[0132]
对于不支持代码构建的视觉元素节点中未进行合并的视觉元素节点，计算机设备还能够将其对应的图层分别导出为切图图层，实现对未进行合并的视觉元素节点的图层进行切图。可选地，计算机设备还会确定不支持代码构建的视觉元素节点中未进行合并的视觉元素节点对应的图层的面积，是否小于第三阈值。当小于第三阈值时，计算机设备会将该视觉元素节点对应的图层导出为切图图层。
[0133]
综上所述，本申请实施例提供的方法，确定出节点树中不支持代码构建的视觉元素节点，并将其中属于同一层级的视觉元素节点进行合并，之后导出合并后的视觉元素节点对应的图层，得到切图图层，从而实现切图。在实现切图的过程中，无需人工进行操作，只需通过计算机设备处理视觉稿文件的节点树，就能够实现导出切图图层。能够避免人工操作带来的容易出错且效率较低的问题，提供了一种全自动导出切图的技术方案。
[0134]
另外，通过过滤条件确定节点树中支持代码构建的视觉元素节点，能够提升确定支持代码构建的视觉元素节点的效率。过滤掉支持代码构建的视觉元素节点，能够避免支持代码构建的视觉元素节点对应的图层被导出为切图图层。通过合并条件确定节点树中属于同一层级的视觉元素节点，从而对视觉元素节点进行合并，之后将合并的视觉元素节点的图层导出为切图图层。能够将需要合并的图层进行合并，从而提升切图的效率，进而能够提升开发人员的开发效率。
[0135]
需要说明的是，本申请实施例提供的方法步骤的先后顺序可以进行适当调整，步骤也可以根据情况进行相应增减，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化的方法，都应涵盖在本申请的保护范围之内，因此不再赘述。
[0136]
图8是本申请实施例提供的一种图层导出装置的结构示意图。该装置可以用于计算机设备或计算机设备上的客户端。如图8所示，该装置80包括：
[0137]
获取模块801，用于获取用户界面的视觉稿文件的节点树，节点树包括视觉元素节点，视觉元素节点与构成用户界面的视觉元素的图层对应。
[0138]
确定模块802，用于确定节点树中不支持代码构建的视觉元素节点。
[0139]
合并模块803，用于对不支持代码构建的视觉元素节点中属于同一层级的视觉元素节点进行合并，得到合并后的视觉元素节点。
[0140]
导出模块804，用于将合并后的视觉元素节点对应的图层，导出为第一切图图层。
[0141]
在一个可选的设计中，合并模块803，用于：
[0142]
对不支持代码构建的视觉元素节点中符合合并条件的视觉元素节点进行合并，得到合并后的视觉元素节点。其中，合并条件用于评判两个视觉元素节点是否属于同一层级。在一个可选的设计中，合并条件包括如下至少之一：
[0143]
两个视觉元素节点对应的图层属于同一个切片组；
[0144]
两个视觉元素节点对应的图层之间的颜色相似度达到第一阈值；
[0145]
两个视觉元素节点对应的图层的相交程度大于第二阈值；
[0146]
两个视觉元素节点在节点树中属于同一个目录层级。
[0147]
在一个可选的设计中，被合并的视觉元素节点还符合：视觉元素节点对应的图层的面积小于第三阈值。
[0148]
在一个可选的设计中，确定模块802，用于：
[0149]
过滤节点树中支持代码构建的视觉元素节点，得到节点树中不支持代码构建的视觉元素节点。
[0150]
在一个可选的设计中，确定模块802，用于：
[0151]
过滤节点树中符合过滤条件的视觉元素节点，得到节点树中不支持代码构建的视觉元素节点。过滤条件包括如下至少之一：
[0152]
属于无样式的文字节点；
[0153]
属于直线节点；
[0154]
属于指定形状的图形节点。
[0155]
在一个可选的设计中，如图9所示，装置80还包括：
[0156]
添加模块805，用于在节点树中对合并后的视觉元素节点添加目标标识。
[0157]
导出模块804，用于将节点树中具有目标标识的视觉元素节点对应的图层，导出为第一切图图层。
[0158]
在一个可选的设计中，导出模块804，用于将不支持代码构建的视觉元素节点中未进行合并的视觉元素节点对应的图层，导出为第二切图图层。
[0159]
需要说明的是：上述实施例提供的图层导出装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的图层导出装置与图层导出方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
[0160]
本申请的实施例还提供了一种计算机设备，该计算机设备包括：处理器和存储器，存储器中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述各方法实施例提供的图层导出方法。
[0161]
可选地，该计算机设备为服务器。示例地，图10是本申请实施例提供的一种服务器的结构示意图。
[0162]
所述服务器1000包括中央处理单元(central processing unit，cpu)1001、包括随机存取存储器(random access memory，ram)1002和只读存储器(read-only memory，rom)1003的系统存储器1004，以及连接系统存储器1004和中央处理单元1001的系统总线1005。所述计算机设备1000还包括帮助计算机设备内的各个器件之间传输信息的基本输入/输出系统(input/output系统，i/o系统)1006，和用于存储操作系统1013、应用程序1014和其他程序模块1015的大容量存储设备1007。
[0163]
所述基本输入/输出系统1006包括有用于显示信息的显示器1008和用于用户输入信息的诸如鼠标、键盘之类的输入设备1009。其中所述显示器1008和输入设备1009都通过连接到系统总线1005的输入输出控制器1010连接到中央处理单元1001。所述基本输入/输出系统1006还可以包括输入输出控制器1010以用于接收和处理来自键盘、鼠标、或电子触控笔等多个其他设备的输入。类似地，输入输出控制器1010还提供输出到显示屏、打印机或其他类型的输出设备。
[0164]
所述大容量存储设备1007通过连接到系统总线1005的大容量存储控制器(未示出)连接到中央处理单元1001。所述大容量存储设备1007及其相关联的计算机可读存储介
质为服务器1000提供非易失性存储。也就是说，所述大容量存储设备1007可以包括诸如硬盘或者只读光盘(compact disc read-only memory，cd-rom)驱动器之类的计算机可读存储介质(未示出)。
[0165]
不失一般性，所述计算机可读存储介质可以包括计算机存储介质和通信介质。计算机存储介质包括以用于存储诸如计算机可读存储指令、数据结构、程序模块或其他数据等信息的任何方法或技术实现的易失性和非易失性、可移动和不可移动介质。计算机存储介质包括ram、rom、可擦除可编程只读寄存器(erasable programmable read only memory，eprom)、电子抹除式可复写只读存储器(electrically-erasable programmable read-only memory，eeprom)、闪存或其他固态存储设备，cd-rom、数字多功能光盘(digital versatile disc，dvd)或其他光学存储、磁带盒、磁带、磁盘存储或其他磁性存储设备。当然，本领域技术人员可知所述计算机存储介质不局限于上述几种。上述的系统存储器1004和大容量存储设备1007可以统称为存储器。
[0166]
存储器存储有一个或多个程序，一个或多个程序被配置成由一个或多个中央处理单元1001执行，一个或多个程序包含用于实现上述方法实施例的指令，中央处理单元1001执行该一个或多个程序实现上述各个方法实施例提供的方法。
[0167]
根据本申请的各种实施例，所述服务器1000还可以通过诸如因特网等网络连接到网络上的远程服务器运行。也即服务器1000可以通过连接在所述系统总线1005上的网络接口单1011连接到网络1012，或者说，也可以使用网络接口单元1011来连接到其他类型的网络或远程服务器系统(未示出)。
[0168]
所述存储器还包括一个或者一个以上的程序，所述一个或者一个以上程序存储于存储器中，所述一个或者一个以上程序包含用于进行本申请实施例提供的方法中由服务器所执行的步骤。
[0169]
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置和各模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
[0170]
本申请实施例中还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有至少一条程序代码，当该程序代码由计算机设备的处理器加载并执行时，实现上述各方法实施例提供的图层导出方法。
[0171]
本申请还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各方法实施例提供的图层导出方法。
[0172]
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，该程序可以存储于一种计算机可读存储介质中，上述提到的可读存储介质可以是只读存储器，磁盘或光盘等。
[0173]
以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同切换、改进等，均应包含在本申请的保护范围之内。