一种页面设计图转页面代码的方法及装置

技术领域

本发明涉及前端开发技术领域，尤其涉及一种页面设计图转页面代码的方法及装置。

背景技术

互联网产品开发中，开发人员需要将设计师的设计的页面设计图编写成相应的页面代码的形式。在编写的过程中，开发人员需要耗费大量时间与设计师沟通，并且在页面设计图数目非常多的时候，开发人员编写页面代码同样耗费大量时间。

并且，当前将页面设计图变成页面代码的方式是先解析页面设计图，获取页面设计图相应的轻量级的数据交换格式(JavaScript Object Notation，JSON)数据，然后通过直译JSON来生成相应的代码。但是，由于JSON数据中页面设计图的元素的位置信息是采用的相对定位的方式，即只通过元素与元素之间的距离来分别定位元素的位置关系。当直接将JSON直译为代码时，代码中的页面设计图的元素的位置信息也是相对定位，这种定位方式导致元素的位置信息有概率出错，并且让开发者难以进行开发维护。

因此，当前亟需一种页面设计图转页面代码的方式，可以将页面设计图直接自动转换为页面代码，并且在转换的过程中不再使用相对定位的形式。

发明内容

本发明提供一种页面设计图转页面代码的方法及装置，用以解决当前方法存在需要手动将页面设计图转换为页面代码，以及转换的页面代码存在页面设计图元素位置信息有概率出错的问题。

第一方面，本发明实施例提供一种页面设计图转页面代码方法，包括：

提取页面设计图的多个图层中的元素信息，所述元素信息包括属性信息和位置信息；

针对每个图层，根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系；根据所述图层中各元素之间的位置关系确定所述图层中各元素的绝对布局；所述位置关系包括元素之间的包含关系、元素之间的并列关系和元素之间的交叉关系；

根据所述多个图层中各元素的绝对布局，将所述多个图层分别对应的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码。

采用上述方法，通过在根据每个图层中各元素的位置信息确定每个图层中各元素的位置关系，进而根据各元素的位置关系来确定该图层中各元素的元素布局，使得在根据各元素的属性信息和位置信息转换为页面设计图相应的页面代码时，确定每个图层中每个元素的绝对位置，从而提高转换的页面代码中页面设计图元素位置信息的正确率。并且，通过提取页面设计图中多个图层各元素的属性信息和位置信息，可以自动转成页面代码，无需手动操作，提高了转成页面代码的效率。

可选地，在根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系之前，还包括：

将页面设计图转换为第一轻量级的数据交换格式JSON数据；

删除所述第一JSON数据中的无用信息得到第二JSON数据；所述无用信息用于表征致使所述页面设计图转换的页面代码混乱的信息；

根据所述第二JSON数据确定所述多个图层分别对应的元素信息。

采用上述方法，通过删除第一JSON数据中的无用信息获得第二JSON数据，使得使用第二JSON数据中的元素信息来将页面设计图转换为相应的页面代码时，避免出现页面代码混乱的情况，提升了页面代码的可用性。

可选地，将所述多个图层分别对应的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码，包括：

根据所述各元素之间的位置关系对所述第二JSON数据进行分类，分别得到包含关系的JSON数据、并列关系的JSON数据和交叉关系的JSON数据；

对所述包含关系的JSON数据、并列关系的JSON数据和交叉关系的JSON数据分别转换为相应的页面代码。

采用上述方法，通过对多种位置关系的第二JSON数据分别分类，使得在后续将这些JSON数据转换为页面代码时，可以高效率地对每一类数据统一处理，加快了转换成页面代码的速度。

可选地，根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系，包括：

在所述位置信息是元素的多个角坐标时，在第一元素的所有角坐标均落入第二元素的所有角坐标的范围中时，所述第一元素与所述第二元素之间是包含关系；

在所述第一元素的所有角坐标的纵坐标范围与所述第二元素的所有角坐标的纵坐标范围存在部分范围相同，且所述第一元素的所有角坐标的横坐标范围与所述第二元素的所有角坐标的横坐标范围不存在范围相同时，所述第一元素和所述第二元素之间是并列关系中的同行关系；

在所述第一元素的所有角坐标的纵坐标范围与所述第二元素的所有角坐标的纵坐标范围不存在范围相同，且所述第一元素的所有角坐标的横坐标范围与所述第二元素的所有角坐标的横坐标范围存在部分范围相同时，所述第一元素和所述第二元素之间是并列关系中的同列关系；

在所述第一元素的所有角坐标的纵坐标范围与所述第二元素的所有角坐标的纵坐标范围存在部分范围相同，且所述第一元素的所有角坐标的横坐标范围与所述第二元素的所有角坐标的横坐标范围存在部分范围相同时，所述第一元素和所述第二元素之间是交叉关系；

所述第一元素和所述第二元素是所述各元素中的任意不同的两个元素。

采用上述方法，通过根据元素的角坐标来确定元素之间的位置关系，为确定每个页面各元素的绝对布局做准备。

可选地，根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系，包括：

在所述位置信息是元素的中心坐标时，根据第三元素的中心坐标和长宽确定所述第三元素的面积以及所述第三元素的各坐标；根据第四元素的中心坐标和长宽确定所述第四元素的面积以及所述第四元素的各坐标；

在所述第三元素的面积小于所述第四元素的面积，且所述第三元素的各坐标位于所述第四元素的各坐标中时，所述第三元素与所述第四元素之间是包含关系；

在所述第三元素的各坐标与所述第四元素的各坐标存在部分纵坐标相同且横坐标不同时，所述第三元素与所述第四元素是所述并列关系中的同行关系；

在所述第三元素的各坐标与所述第四元素的各坐标存在纵坐标不同且部分横坐标相同时，所述第三元素与所述第四元素是所述并列关系中的同列关系；

在所述第三元素的各坐标与所述第四元素的各坐标存在部分纵坐标相同且部分横坐标相同时，所述第三元素与所述第四元素是所述交叉关系；

所述第三元素和所述第四元素是所述各元素中的任意不同的两个元素。

采用上述方法，通过根据元素的中心坐标和包括的各坐标来确定元素之间的位置关系，为确定每个页面各元素的绝对布局做准备。

可选地，提取页面设计图的多个图层中的元素信息之后，还包括：

针对任一元素，根据所述元素的元素信息确定所述元素为图片，则提取图片并存储；

将所述多个图层分别对应的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码，包括：

将所述多个图层分别对应的具有样式信息的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码。

可选地，还包括：

针对任一元素，根据所述元素的属性信息将所述元素封装为多个不同类别组件；

根据各元素的位置信息拼接不同类别的组件获取所述页面设计图对应的骨架图；

按照各元素的位置信息对所述骨架图和所述页面设计图进行匹配，通过所述骨架图展示所述各元素的标注信息；所述标注信息由所述多个图层分别对应的元素的属性信息共同组成。

采用上述方法，通过将多个元素封装为不同类别的组件，并进行拼接构成骨架图，从而通过骨架图与页面设计图的匹配展示标注信息，从而便于用户后续使用该页面时，能够通过骨架图直接看到每一个元素的属性信息，这些属性信息就是标注信息。

可选地，还包括：

确定所述骨架图中选定的作为参考的第一组件和作为目标的第二组件；

获取在所述第一组件和所述第二组件之间设置的辅助标记，并显示所述辅助标记。

第二方面，本发明实施例提供一种页面设计图转页面代码装置，包括：

收发单元，用于提取页面设计图的多个图层中的元素信息，所述元素信息包括属性信息和位置信息；

处理单元，用于针对每个图层，根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系；根据所述图层中各元素之间的位置关系确定所述图层中各元素的绝对布局；所述位置关系包括元素之间的包含关系、元素之间的并列关系和元素之间的交叉关系；根据所述多个图层中各元素的绝对布局，将所述多个图层分别对应的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码。

第三方面，本申请还提供一种装置。该装置可以执行上述方法设计。该装置可以是能够执行上述方法对应的功能的芯片或电路，或者是包括该芯片或电路的设备。

在一种可能的实现方式中，该装置包括：存储器，用于存储计算机可执行程序代码；以及处理器，处理器与存储器耦合。其中存储器所存储的程序代码包括指令，当处理器执行所述指令时，使该装置或者安装有该装置的设备执行上述任意一种可能的设计中的方法。

其中，该装置还可以包括通信接口，该通信接口可以是收发器，或者，如果该装置为芯片或电路，则通信接口可以是该芯片的输入/输出接口，例如输入/输出管脚等。

在一种可能的设计中，该装置包括相应的功能单元，分别用于实现以上方法中的步骤。功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的单元。

第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，当所述计算机程序在装置上运行时，执行上述任意一种可能的设计中的方法。

另外，第三方面至第四方面中任一种实现方式所带来的技术效果可参见第一方面中不同实现方式所带来的技术效果，此处不再赘述。

附图说明

图1为本发明实施例提供的一种页面设计图转页面代码的方法的流程示意图；

图2(a)为本发明实施例提供的一种包含关系的第一种位置关系确定方式示意图；

图2(b)为本发明实施例提供的一种包含关系的第二种位置关系确定方式示意图；

图3(a)为本发明实施例提供的一种并列关系的同行关系的第一种位置关系确定方式示意图；

图3(b)为本发明实施例提供的一种并列关系的同行关系的第二种位置关系确定方式示意图；

图4(a)为本发明实施例提供的一种交叉关系的第一种位置关系确定方式示意图；

图4(b)为本发明实施例提供的一种交叉关系的第二种位置关系确定方式示意图；

图5为本发明实施例提供的一种页面设计图标注的流程示意图；

图6为本发明实施例提供的一种骨架图的示意图；

图7为本发明实施例提供的一种标注辅助线的示意图；

图8为本发明实施例提供的一种通信装置800；

图9本发明实施例还提供另一种通信装置900。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部份实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

本发明实施例描述的应用场景是为了更加清楚的说明本发明实施例的技术方案，并不构成对于本发明实施例提供的技术方案的限定，本领域普通技术人员可知，随着新应用场景的出现，本发明实施例提供的技术方案对于类似的技术问题，同样适用。其中，在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。

当前，互联网产品的开发需要开发人员将设计师的页面设计图编写为页面代码，这就需要开发人员耗费大量时间编写页面代码以及跟设计师沟通。同时，现有的页面设计图编写为页面代码，是根据JSON中元素的相对定位关系来确定的，这会导致在JSON直译为代码也是相对定位关系，使得元素的位置信息有概率出错，同时让开发者难以维护。

基于此，本申请提出了页面设计图转页面代码的方法，使得页面设计图可以自动转换成页面代码，并且提高转换的页面代码中页面设计图元素位置信息的正确率。

如图1所示，本申请提出的一种页面设计图转页面代码的方法的流程具体如下。

步骤100：提取页面设计图的多个图层中的元素信息。

示例性地，在获取页面设计图后，可以提取到页面设计图中多个图层中的元素信息。其中，元素信息包括属性信息和位置信息。

具体地，可以通过jszip提取页面设计图中多个图层的元素信息，以及页面设计图中多个图层的信息，此外，还可以通过其他方式提取页面设计图中多个图层的元素信息，本申请不做限定。其中，元素包括图片元素和非图片元素，非图片元素是指页面设计图中除图片之外的其他部分，例如文字元素。多个图层的信息是指图层具体的编号，例如第1个图层，第2个图层等。此外，在元素为图片元素时，还可以通过jszip提取页面设计图中的多个图层分别对应的具体图片。

具体地，在元素为图片元素时，图片元素的属性信息包括图片的长宽，图片的填充效果等；在元素为非图片元素时，非图片元素的属性信息包括元素的类型、元素的长宽、元素的颜色以及元素的样式等。

具体地，本申请不限定图片的位置信息和元素的位置信息的呈现方式，图片的位置信息和元素的位置信息均可以以坐标形式呈现。图片的坐标和元素的坐标均可以是元素的中心坐标，即一个具体的坐标点，也可以是元素的多个角坐标。

示例性地，设定元素是“熊猫”这几个字，则此时元素的坐标可以是为(1,1)，(1,2)，(2,1)，(2,2)这样的四个角坐标，此时元素的属性信息包括元素的类型为文字，元素的长为2，宽为1，元素的颜色为黑色，元素的样式(即字体)为正楷等信息。

步骤110：针对每个图层，根据图层中各元素的位置信息确定图层中各元素之间的位置关系，根据图层中各元素之间的位置关系确定图层中各元素的绝对布局。

示例性地，在步骤100中提取页面设计图的多个图层中的元素信息之后，将这些信息转换为第一JSON数据。具体地，可以通过jszip进行转换，还可以通过其他可行的方法进行转换，本申请不做限定。具体地，转换后的第一JSON数据中同样包括多个图层的信息，以及每个图层对应的元素信息。

示例性地，在获取到页面设计图对应的第一JSON数据后，由于第一JSON数据中存在一些无用信息，因此需要对第一JSON数据进行筛选，删除这些无用信息获得第二JSON数据。具体地，无用信息包括透明图层，被遮挡的图层等，无用信息会使页面设计图转换的页面代码出现混乱。

示例性地，在获得第二JSON数据后，针对其中的任一元素，根据元素的元素信息确定元素为图片元素时，则提取图片并存储。具体地，将第二JSON数据中的每个图层对应的具体图片上传到服务器，服务器会返回每个图片对应的地址，便于后续对图片的调用。此时获得的具体图片即实现了对页面设计图中图片的切图。

示例性地，在获得第二JSON数据后，可以根据每个图层中各元素的位置信息确定图层中各元素之间的位置关系。其中，每个图层各元素之间的位置关系包括图片元素与非图片元素之间的位置关系，图片元素与图片元素之间的位置关系，以及非图片元素和非图片元素之间的位置关系。具体地，位置关系包括元素之间的包含关系，并列关系和交叉关系。

第一种位置关系确定方式：在坐标是元素的多个角坐标时，设定第一元素和第二元素，第一元素和第二元素是各元素中的任意不同的两个元素。

具体地，在第一元素的所有角坐标均落入第二元素的所有角坐标的范围中时，第一元素与第二元素是包含关系，且是第二元素包含第一元素。

在第一元素的所有角坐标的纵坐标范围与第二元素的所有角坐标的纵坐标范围存在部分范围相同，且第一元素的所有角坐标的横坐标范围与第二元素的所有角坐标的横坐标范围不存在范围相同时，第一元素和第二元素是并列关系中的同行关系；在第一元素的所有角坐标的纵坐标范围与第二元素的所有角坐标的纵坐标范围不存在范围相同，且第一元素的所有角坐标的横坐标范围与第二元素的所有角坐标的横坐标范围存在部分范围相同时，第一元素和第二元素之间是并列关系中的同列关系。

在第一元素的所有角坐标的纵坐标范围与第二元素的所有角坐标的纵坐标范围存在部分范围相同，且第一元素的所有角坐标的横坐标范围与第二元素的所有角坐标的横坐标范围存在部分范围相同时，第一元素和第二元素是交叉关系。

第二种位置关系确定方式：在坐标是元素的中心坐标时，设定第三元素和第四元素，第三元素和第四元素是各元素中的任意不同的两个元素。

具体地，根据第三元素的中心坐标和长宽确定第三元素的面积以及第三元素的各坐标；根据第四元素的中心坐标和长宽确定第四元素的面积以及第四元素的各坐标。

在第三元素的面积小于第四元素的面积，且第三元素的各坐标位于第四元素的各坐标中时，第三元素与第四元素是包含关系，且第四元素包含第三元素；在第三元素的各坐标与第四元素的各坐标存在部分纵坐标相同且横坐标不同时，第三元素与第四元素是并列关系中的同行关系；在第三元素的各坐标与第四元素的各坐标存在纵坐标不同且部分横坐标相同时，第三元素与第四元素是并列关系中的同列关系；在第三元素的各坐标与第四元素的各坐标存在部分纵坐标相同且部分横坐标相同时，第三元素与第四元素是交叉关系。

示例性地，在确定了每个图层中各元素之间的位置关系后，根据每个图层中各元素之间的位置关系确定相应图层中各元素的绝对布局。具体地，每个图层中各元素的绝对布局是指该图层中各元素的位置是唯一且绝对的，在图层进行大小缩放时，图层中的元素也会随之进行大小缩放。其中，可以通过flex布局构成绝对布局，也可以通过其他布局方式，本申请不做限定。

步骤120：根据多个图层中各元素的绝对布局，将多个图层分别对应的各元素的属性信息和各元素的位置信息转换为页面设计图相应的页面代码。

示例性地，在步骤110中构成了多个图层中各元素的绝对布局之后，可以将多个图层分别对应的各元素的属性信息和各元素的位置信息转换为页面设计图相应的页面代码。其中，页面代码可以是层叠样式表(Cascading Style Sheets，CSS)代码，还可以是c代码、java代码等，本申请不做具体限定。

具体地，在转换为页面设计图相应的页面代码时，可以先根据各元素之间的位置关系对第二JSON数据进行分类，得到包含关系的JSON数据、并列关系的JSON数据以及交叉关系的JSON数据，便于后续将JSON数据转换为页面代码时，可以对这三种类别的JSON数据分开处理，对包含关系的JSON数据、并列关系的JSON数据和交叉关系的JSON数据分别转换为相应的页面代码，从而加快JSON数据转换为页面代码的速度，同时也更加便捷。其中，可以结合二叉树算法、递归算法、函数柯里化算法等实现分类。

具体地，在转换为页面设计图相应的页面代码时，还将多个图层分别对应的具有样式信息的各元素的属性信息和各元素的位置信息转换为页面设计图相应的页面代码。其中，具有样式信息的各元素的属性信息即为图片元素的长宽、非图片元素的长宽、颜色、样式等信息。

示例性地，对于包含关系，并列关系和交叉关系进行举例具体说明。

(1)包含关系

对于包含关系，在第一种位置关系确定方式时，如下图2(a)所示，设定存在第一元素A和第二元素B，第一元素A的四个角坐标为(1,1)、(1,3)、(3,1)和(3,3)，第二元素B的四个角坐标为(1,1)、(1,2)、(2,1)和(2,2)，此时，第二元素B的所有角坐标均落入第一元素A的所有角坐标的范围中，则称第一元素A包含第二元素B。此外，包含关系又可称为父子关系，包含者为父(即第一元素A)，被包含的为子(即第二元素B)。

对于包含关系，在第二种位置关系确定方式时，如下图2(b)所示，设定存在第一元素A和第二元素B，第一元素A的中心坐标是(4,4)第一元素A的长为4，宽为2；第二元素B的中心坐标是(4,4)，第二元素B的长为2，宽为2。此时第一元素A的面积是8，第一元素A的各坐标包括(2,3)、(3,3)、(4,3)、(5,3)、(6,3)、(2,4)、(3,4)、(4,4)、(5,4)、(6,4)、(2,5)、(3,5)、(4,5)、(5,5)、(6,5)。第二元素B的面积是4，第二元素B的各坐标包括(3,3)、(4,3)、(5,3)、(3,4)、(4,4)、(5,4)、(3,5)、(4,5)、(5,5)。因此，此时第二元素B的面积小于第一元素A的面积，且第二元素B的各坐标位于第一元素A的各坐标中，第一元素A包括第二元素B。

(2)并列关系

对于并列关系中的同行关系，在第一种位置关系确定方式时，如下图3(a)所示，设定存在第三元素C和第四元素D，第三元素C的四个角坐标为(4,1)、(4,3)、(6,1)和(6,3)，第四元素D的四个角坐标为(7,1)、(7,3)、(8,1)和(8,3)。此时，第三元素C的所有角坐标的纵坐标范围是1至3，第四元素D的所有角坐标的纵坐标范围也是1至3，二者相同。第三元素C的所有角坐标的横坐标范围是4至6，第四元素D的所有角坐标的横坐标范围是7至8，二者不相同。此时，第三元素C和第四元素D是并列关系中的同行关系。

对于并列关系中的同行关系，在第二种位置关系确定方式时，如下图3(b)所示，设定存在第三元素C和第四元素D，第三元素C的中心坐标是(4,4),长是4，宽是2，第四元素D的中心坐标是(8,4)，长是2，宽是2。此时，第三元素C的面积是8，第三元素C的各坐标包括(2,3)、(3,3)、(4,3)、(5,3)、(6,3)、(2,4)、(3,4)、(4,4)、(5,4)、(6,4)、(2,5)、(3,5)、(4,5)、(5,5)、(6,5)。第四元素D的面积是4，第四元素D的各坐标包括(7,3)、(8,3)、(9,3)、(7,4)、(8,4)、(9,4)、(7,5)、(8,5)、(9,5)。因此，此时第三元素C的各坐标与第四元素D的各坐标存在部分纵坐标相同(即都是3至5)且横坐标不同，而这位并列关系中的同行关系。

对于并列关系中同列关系，其判断与并列关系中的同行关系相反，是两个元素的纵坐标不同且部分横坐标相同，此处不再举例进行描述。

(3)交叉关系

对于交叉关系，在第一种位置关系确定方式时，如下图4(a)所示，设定存在第五元素E和第六元素F，第五元素E的四个角坐标为(9,1)、(9,3)、(12,1)和(12,3)，第六元素F的四个角坐标为(11,1)、(11,3)、(13,1)和(13,3)。此时，第五元素E的角坐标的纵坐标范围是1至3，第六元素F的角坐标的纵坐标范围也是1至3，第五元素E的角坐标的横坐标范围是9至12，第六元素F的角坐标的横坐标范围是11至13，二者纵坐标范围相同，且横坐标范围存在部分相同，此时第五元素E和第六元素F是交叉关系。

对于交叉关系，在第二种位置关系确定方式时，如下图4(b)所示，设定存在第五元素E和第六元素F，第五元素E的中心坐标是(4,4),长是4，宽是2，第六元素F的中心坐标是(6,4)，长是2，宽是2。此时，第三元素C的面积是8，第三元素C的各坐标包括(2,3)、(3,3)、(4,3)、(5,3)、(6,3)、(2,4)、(3,4)、(4,4)、(5,4)、(6,4)、(2,5)、(3,5)、(4,5)、(5,5)、(6,5)。第四元素D的面积是4，第四元素D的各坐标包括(5,3)、(6,3)、(7,3)、(5,4)、(6,4)、(7,4)、(5,5)、(6,5)、(7,5)。二者的纵坐标范围相同均是3至5，且部分横坐标范围相同，因此，第五元素E和第六元素F是交叉关系。

此外，对于包含关系，可以如图2(a)和2(b)所示的一个元素中只包含一个其他元素，也可以一个元素中包含多个其他元素，这些其他元素也可以是包含关系、并列关系或交叉关系。同样的，对于并列关系或交叉关系相应的元素中也可以嵌套其他元素的包含关系、并列关系或交叉关系。

示例性地，在步骤110中获得第二JSON数据后，还可以根据第二JSON数据对页面设计图进行标注，具体过程如下图5所示。

步骤510：针对任一元素，根据元素的属性信息将元素封装为多个不同类别组件。

示例性地，根据第二JSON数据中的多个图层分别对应的元素的属性信息将元素封装为多个不同类别的组件。具体地，对于图片元素，可以将图片元素封装为多个图片组件，其中，每个图片组件包括图片的长宽等属性信息；对于非图片元素中的文字元素，可以将文字元素封装为多个文字组件，其中，每个文字组件包括文字的字体、长宽、颜色等属性信息；对于非图片元素中的实线框元素，可以将实线框元素封装为多个实线框组件，其中，每个实线框组件包括实线框的粗细、长宽、颜色等属性信息。此外，还有别的组件类别，本申请不再一一赘述。

步骤520：根据各元素的位置信息拼接不同类别的组件获取页面设计图对应的骨架图。

示例性地，在根据元素的属性信息将元素封装为多个不同类别的组件之后，可以根据多个图层分别对应的元素的位置信息确定多个不同类别组件的位置信息。具体地，根据第二JSON数据中的元素的位置信息确定不同组件的位置信息，例如图片元素的位置信息即为该图片相应组件的位置信息，文字元素的位置信息即为该文字相应组件的位置信息。

示例性地，在确定不同类别组件的位置信息后，可以根据这些组件的位置信息进行拼接获取页面设计图对应的骨架图。具体地，对每个图层中的组件分别进行拼接，然后结合各个图层中的拼接结果得到页面设计图对应的整体骨架图，具体如图6所示。

以位置信息为角坐标为例进行具体说明。例如第一组件A的角坐标为(1,1)、(2,1)、(1,2)、(2,2)，第二组件B的角坐标为(2,1)、(2,2)、(3,1)、(3,2)，则此时第一组件A和第二组件B可以进行拼接。

步骤530：按照各元素的位置信息对骨架图和页面设计图进行匹配，通过骨架图展示各元素的标注信息。

示例性地，在获取骨架图之后，可以将骨架图与页面设计图进行匹配。具体地，以页面设计图为背景，骨架图覆盖在页面设计图上，二者是同样大小的。此时由于骨架图中的每个组件均包括属性信息，则在该组件被感应时(例如，将鼠标放在该组件对应的元素上)，会显示出该组件对应的属性信息，此时这些组件对应的多个属性信息共同构成了页面设计图的标注信息。

示例性地，还可以通过骨架图标注页面设计图中的辅助标记。通过确定骨架图中选定的作为参考的第一组件和作为目标的第二组件，获取在第一组件和第二组件之间设置的辅助标记，并显示该辅助标记。其中，辅助标记可以是辅助线，还可以是其他标记，本申请不做限定。

具体地，如下图7所示，设定作为参考的第一组件为组件A，作为目标的第二组件为组件B，当使用鼠标选中组件A后，再次将鼠标放在组件B上，此时会自动标注出组件A与组件B的辅助线。图7是标注辅助线的一种示例，还有多种辅助线的标注方式，本申请不做限定。

采用上述方法，通过在根据每个图层中各元素的位置信息确定每个图层中各元素的位置关系，进而根据各元素的位置关系来确定该图层中各元素的元素布局，使得在根据各元素的属性信息和位置信息转换为页面设计图相应的页面代码时，确定每个图层中每个元素的绝对位置，从而提高转换的页面代码中页面设计图元素位置信息的正确率。并且，通过提取页面设计图中多个图层各元素的属性信息和位置信息，可以自动转成页面代码，无需手动操作，提高了转成页面代码的效率。此外，通过上述方法还可以根据元素的位置关系生成页面设计图的骨架图，从而实现对页面设计图的自动标注，以及获取元素中的图片元素后，对图片元素进行存储和上传服务器，实现对页面设计图的自动切图。

本发明实施例中对单元的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，另外，在本发明各个实施例中的各功能单元可以集成在一个处理器中，也可以是单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

本发明实施例还提供一种通信装置800，参见图8所示，通信装置800包括：处理模块810和收发模块820。

收发模块820可以包括接收模块和发送模块。处理模块810用于对通信装置800的动作进行控制管理。收发模块820用于支持通信装置800与其他装置的通信。可选地，通信装置800还可以包括存储模块，所述存储模块用于存储通信装置800的程序代码和数据。

可选地，所述通信装置800中各个模块可以是通过软件来实现。

可选地，处理模块810可以是处理器或控制器，收发模块820可以是通信接口、收发器或收发电路等，其中，该通信接口是统称，在具体实现中，该通信接口可以包括多个接口，存储模块可以是存储器。

在一种可能的实现方式中，通信装置800适用于无线接入控制器设备或无线接入点设备；

收发模块820，用于提取页面设计图的多个图层中的元素信息，所述元素信息包括属性信息和位置信息；

处理模块810，用于针对每个图层，根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系；根据所述图层中各元素之间的位置关系确定所述图层中各元素的绝对布局；所述位置关系包括元素之间的包含关系、元素之间的并列关系和元素之间的交叉关系；根据所述多个图层中各元素的绝对布局，将所述多个图层分别对应的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码。

本发明实施例还提供另一种通信装置900，该通信装置900可以是终端设备或终端设备内部的芯片系统，参见图9所示，包括：

通信接口901，存储器902以及处理器903；

其中，所述通信装置900通过所述通信接口901与其它设备进行通信，比如收发消息；存储器902，用于存储程序指令；处理器903，用于调用所述存储器902中存储的程序指令，按照获得的程序执行的方法。

处理器903调用通信接口901和存储器902存储的程序指令执行：

提取页面设计图的多个图层中的元素信息，所述元素信息包括属性信息和位置信息；

针对每个图层，根据所述图层中各元素的位置信息确定所述图层中各元素之间的位置关系；根据所述图层中各元素之间的位置关系确定所述图层中各元素的绝对布局；所述位置关系包括元素之间的包含关系、元素之间的并列关系和元素之间的交叉关系；

根据所述多个图层中各元素的绝对布局，将所述多个图层分别对应的各元素的属性信息和各元素的位置信息转换为所述页面设计图相应的页面代码。

本发明实施例中不限定上述通信接口901、存储器902以及处理器903之间的具体连接介质，比如总线，总线可以分为地址总线、数据总线、控制总线等。

在本发明实施例中，处理器可以是通用处理器、数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

在本发明实施例中，存储器可以是非易失性存储器，比如硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)等，还可以是易失性存储器(volatilememory)，例如随机存取存储器(random-access memory，RAM)。存储器还可以是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。本发明实施例中的存储器还可以是电路或者其它任意能够实现存储功能的装置，用于存储程序指令和/或数据。

本发明实施例还提供一种计算机可读存储介质，包括程序代码，当程序代码在计算机上运行时，程序代码用于使计算机执行上述本发明实施例上述提供的方法的步骤。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。