CN111414165B - 界面代码的生成方法及设备 - Google Patents
界面代码的生成方法及设备 Download PDFInfo
- Publication number
- CN111414165B CN111414165B CN201910010012.5A CN201910010012A CN111414165B CN 111414165 B CN111414165 B CN 111414165B CN 201910010012 A CN201910010012 A CN 201910010012A CN 111414165 B CN111414165 B CN 111414165B
- Authority
- CN
- China
- Prior art keywords
- information
- interface
- node
- code
- layout
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000012545 processing Methods 0.000 claims abstract description 11
- 238000013461 design Methods 0.000 claims description 47
- 238000009826 distribution Methods 0.000 claims description 24
- 230000001960 triggered effect Effects 0.000 claims description 9
- 238000012795 verification Methods 0.000 claims description 7
- 238000012937 correction Methods 0.000 claims description 4
- 230000002093 peripheral effect Effects 0.000 claims description 4
- 230000008569 process Effects 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 27
- 238000004891 communication Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 9
- 238000007667 floating Methods 0.000 description 8
- 239000011295 pitch Substances 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 238000003860 storage Methods 0.000 description 5
- 238000004590 computer program Methods 0.000 description 4
- 238000012015 optical character recognition Methods 0.000 description 4
- 230000008676 import Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000004931 aggregating effect Effects 0.000 description 1
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000005520 cutting process Methods 0.000 description 1
- 238000013075 data extraction Methods 0.000 description 1
- 238000009795 derivation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000002787 reinforcement Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000010008 shearing Methods 0.000 description 1
- 230000007480 spreading Effects 0.000 description 1
- 238000003892 spreading Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000009966 trimming Methods 0.000 description 1
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例提供一种界面代码的生成方法及设备。其中，方法包括如下的步骤：确定待处理图像文件的界面元素信息；基于所述界面元素信息，确定界面的布局信息；根据所述布局信息，生成界面代码。本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。
Description
技术领域
本申请涉及电子技术领域，尤其涉及一种界面代码的生成方法及设备。
背景技术
目前，互联网下业务发展迅速，各类产品迭代迅速。如何提高用户界面的开发效率，快速对接高速发展的互联网业务是一项重要使命。
然而，现有的用户界面开发过程中，需要设计师先依靠设计工具设计出用户界面的设计稿，编程人员根据设计师设计出的设计稿，通过人工编写代码的方式得到用户界面的界面代码。这种开发方式的开发效率低且开发周期较长。
发明内容
鉴于上述问题，提出了本申请以提供一种解决上述问题或至少部分地解决上述问题的界面代码的生成方法及设备。
于是，在本申请的一个实施例中，提供了一种界面代码的生成方法。该方法包括：
确定待处理图像文件的界面元素信息；
基于所述界面元素信息，确定界面的布局信息；
根据所述布局信息，生成界面代码。
在本申请的另一个实施例中，提供了一种界面代码的生成方法。该方法包括：
显示操作界面，以供用户输入待处理图像数据；
响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码。
在本申请的又一实施例中，提供了一种电子设备。该电子设备，包括：
第一存储器和第一处理器，其中，
所述第一存储器，用于存储程序；
所述第一处理器，与所述第一存储器耦合，用于执行所述第一存储器中存储的所述程序，以用于：
确定待处理图像文件的界面元素信息；
基于所述界面元素信息，确定界面的布局信息；
根据所述布局信息，生成界面代码。
在本申请的又一实施例中，提供了一种电子设备。该电子设备，包括：
第二存储器、第二处理器和第二显示器，其中，
所述第二存储器，用于存储程序；
所述第二显示器，与所述第二处理器耦合，用于显示操作界面，以供用户输入待处理图像数据；
所述第二处理器，与所述第二存储器耦合，用于执行所述第二存储器中存储的所述程序，以用于：
响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码。
本申请实施例提供的技术方案中，先从待处理图像文件中导出界面元素信息，根据界面元素信息，确定出界面的布局信息，再根据布局信息自动生成界面代码。可见，本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请一实施例提供的生成方法的流程示意图；
图2为本申请又一实施例提供的生成方法的流程示意图；
图3为本申请一实施例提供的生成装置的结构框图；
图4为本申请一实施例提供的生成装置的结构框图；
图5为本发明一实施例提供的电子设备的结构框图；
图6为本发明又一实施例提供的电子设备的结构框图；
图7为本申请一实施例提供的生成方法的流程示意图；
图8为本申请一实施例提供的布局方法的流程示意图；
图9为本申请一实施例提供的一操作界面图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。
在本发明的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
现有技术中，设计人员设计好UI(User Interface，用户界面)设计稿后，将UI设计稿交付给编程人员。编程人员根据UI设计稿进行代码编写得到界面代码。在编程人员编写好界面代码后，设计人员才能看到代码实现的真实UI效果，以进行视觉走查。这种开发方式开发效率低下且开发周期较长。
为了提高开发效率和缩短开发周期，本申请实施例提供了一种基于待处理图像文件自动生成界面代码的方法。
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1示出了本申请一实施例提供的界面代码的生成方法的流程示意图。如图1所示，该方法包括：
101、确定待处理图像文件的界面元素信息。
102、基于所述界面元素信息，确定界面的布局信息。
103、根据所述布局信息，生成界面代码。
上述101中，待处理图像文件可以为设计稿或设计图。其中。设计稿指的是UI设计师通过设计软件制作出来的原始文件，该原始文件中通常会包含有多个图层；设计图指的是基于设计稿生成的图片，例如：截图。具体实施时，待处理图像文件可以为一UI模块对应的设计稿或设计图。
设计师常用的设计软件如：Sketch、Photoshop等。这些设计软件通常会向用户开放一应用程序接口(即插件)，可通过设计软件的应用程序接口导出与设计稿相关的界面元素信息，并将导出的界面元素信息缓存在一缓存空间，例如：剪切板。在导出过程中，该插件会遍历待处理图像文件的所有图层，并对所有图层进行类型解析以及数据提取。
其中，界面元素信息中可包括：各界面元素的属性信息。属性信息可包括以下项中的至少一项：名称、类型、坐标、宽高、绘制顺序、填充内容以及填充内容的样式。界面元素的类型可包括但不限于：文本类型、图片类型、shape类型、input类型、textArea类型。
上述102中，可从缓存空间中导出界面元素信息，进行布局识别，得到布局信息。布局信息中包括：各界面元素之间的父子节点关系以及各父节点下的各子节点的分布信息。
父节点对应的界面元素位于其子节点对应的界面元素的下方，即父节点对应的界面元素的绘制顺序先于其子节点对应的界面元素的绘制顺序。父节点与子节点之间的具体关系可包括：包含关系和交叉关系。包含关系指的是子节点对应的界面元素全部与父节点对应的界面元素重叠。交叉关系指的是子节点对应的界面元素只部分与父节点对应的界面元素重叠。
上述103中，对界面的布局信息进行代码转换，以得到界面代码。可根据实际需要生成多种代码语言类型对应的界面代码。代码语言类型包括但不限于：HTML(HyperTextMarkup Language，超级文本标记语言)、Vue、Rax。
本申请实施例提供的技术方案中，先从待处理图像文件中导出界面元素信息，根据界面元素信息，确定出界面的布局信息，再根据布局信息自动生成界面代码。可见，本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。
在一种可实现的方案中，上述102中“基于所述界面元素信息，确定界面的布局信息”，具体可采用如下步骤来实现：
1021、基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息。
1022、根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息。
上述1021中，可基于各界面元素的位置信息及绘制顺序信息，确定所述各界面元素之间的父子节点关系。其中，位置信息包括坐标和宽高。
具体可根据各界面元素中任意两个界面元素的位置信息确定任意两个界面元素之间是否存在重叠部分；当两个界面元素之间存在重叠部分时，根据该两个界面元素的绘制顺序信息，将这两个界面元素中先绘制的界面元素作为父节点，将后绘制的界面元素作为该父节点的子节点；遍历所有界面元素后，即可得到所有界面元素之间的父子节点关系。
为了提高确定出的父子节点关系的合理性，上述1021中的“基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系”，可采用如下步骤来实现：
S11、基于各界面元素的位置信息及绘制顺序信息，确定所述各界面元素之间的初始父子节点关系。
S12、在所述初始父子节点关系中，若存在指定类界面元素作为父节点的情况，则在所述初始父节点关系中新增一第一容器节点来容纳所述指定类界面元素及所述指定类界面元素的子节点，以得到所述父子节点关系。
上述S11中的初始父子节点关系的具体确定过程可参见上述相应内容，在此不再赘述。
上述S12中，指定类界面元素可以为：图片类界面元素和文本类界面元素。由于图片类界面元素和文本类界面元素作为父节点，是不合理的。故：在所述初始父子节点关系中，若存在指定类界面元素作为父节点的情况，则在所述初始父节点关系中新增一第一容器节点来容纳所述指定类界面元素及所述指定类界面元素的子节点，以得到所述父子节点关系。
具体来说：在初始父节点关系中：节点A的子节点有B和C，且节点A的父节点为节点Q。节点A为图片类界面元素，故新增一个第一容器节点D，由D作为A、B和C的父节点，且D的父节点为Q。
在父子节点关系中除根节点和叶子节点以外，每个节点既作为父节点也作为子节点。根节点只能作为父节点，叶子节点只能作为子节点。父子节点关系中通常会存在两种类型的父节点：第一类父节点和第二类父节点。第一类父节点指的是：与其子节点为上述包含关系的父节点；第二类父节点指的是：与其子节点为上述交叉关系的父节点。
上述1021中“确定第一类父节点的至少一个第一子节点的分布信息”，具体为：根据所述至少一个第一子节点的位置信息，确定所述至少一个第一子节点的行列信息以及所述至少一个第一子节点中各第一子节点的四周间距信息。
其中，第一类父节点的至少一个第一子节点的分布信息包括：所述至少一个第一子节点的行列信息以及所述至少一个第一子节点中各第一子节点的四周间距信息。
具体实施时，可通过行列扫描得到至少一个第一子节点的行列信息；再根据行列信息，对所述至少一个第一子节点进行边界扫描，以得到各第一子节点的四周间距信息。通常，四周间距信息包括：左间距、右间距、上间距和下间距。
上述1021中“确定所述第二类父节点的至少一个第二子节点的分布信息”，具体为：根据所述第二类父节点以及所述至少一个第二子节点的位置信息，对所述至少一个第二子节点进行绝对定位布局，以得到所述至少一个第二子节点的分布信息。
第二类父节点对应的界面元素与第二子节点对应的界面元素之间为交叉关系，故根据第二类父节点的位置信息以及至少一个第二子节点的位置信息进行计算，得到至少一个第二子节点相对于第二类父节点的绝对坐标信息。
上述1022中，可对所述父子节点关系及各父节点的至少一个子节点的分布信息进行组合，以得到界面的布局信息。
为了提高各界面元素之间的父子节点关系的准确度，需要对界面元素信息中可能存在的溢出以及微小交叉等情况进行修整。例如：当两个界面元素的边界的重叠程度低于重叠阈值时，可对两个界面元素进行边界修复，以使两个界面元素的边界不重叠。
为了更加贴近实际开发中人工写代码的场景，以提高界面代码的实际可用性以及维护性，可在布局信息中添加伸缩布局属性(即flex布局属性)。具体的，上述方法，还可包括：
104、根据所述至少一个第一子节点中各第一子节点的四周间距信息，确定各行的伸缩布局属性和各列的伸缩布局属性。
105、根据所述各行的伸缩布局属性和各列的伸缩布局属性，确定对所述布局信息的修正方案。
上述104中，伸缩布局属性包括：水平居中、垂直居中、间隔同等布局(即一行或一列中存在多个间距，多个间距中任两个间距的差值小于第一误差值)等。可事先根据实际应用中各类伸缩布局属性，设置各类伸缩布局属性对应的间距规则；后续，根据每一行上的第一子节点的四周间距信息，来与各类伸缩布局属性对应的间距规则进行匹配，将匹配上的间距规则对应的伸缩布局属性作为每一行的伸缩布局属性；根据每一列上的第一子节点的四周间距信息，来与各类伸缩布局属性对应的间距规则进行匹配，将匹配上的间距规则对应的伸缩布局属性作为每一列的伸缩布局属性。。
例如：水平居中对应的间距规则为：行的左间距与行的右间距的差值小于第二误差值；第一行上包括从左到右排列的第一子节点A和B，第一子节点A的左间距Z1即为第一行的左间距，第一子节点B的右间距Z2即为第一行的右间距。当Z1和Z2的差值小于第二误差值时，第一行的伸缩布局属性即为水平居中。
上述105中，所述各行的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一行的伸缩布局属性。
所述各列的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一列的伸缩布局属性。
所述各行的伸缩布局属性不一致且所述各列的伸缩布局属性也不一致时，在所述布局信息中，为各行新增一第二容器节点以容纳各行上的第一子节点，并为各行新增的所述第二容器节点添加各行对应的伸缩布局属性，其中，各行的所述第二容器节点为所述第一类父节点的子节点。此外，各行的第二容器节点为各行上的第一子节点的父节点。
在为各行新增一第二容器节点以容纳各行上的第一子节点，并为各行新增的所述第二容器节点添加各行对应的伸缩布局属性后，可剔除一定规则下多余的伸缩布局属性，例如：左对齐通常为默认伸缩布局属性，故左对齐的伸缩布局属性可剔除。
进一步的，上述103中“根据所述布局信息，生成界面代码”，具体可采用如下步骤来实现：
1031、根据所述布局信息，从代码库中匹配出相应的代码布局信息。
1032、根据所述布局信息中各界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中各节点在代码层面的属性信息。
1033、将所述各节点在代码层面的属性信息添加至所述代码布局信息中，以得到所述界面代码。
可事先根据各种可能存在的布局信息进行代码编码，以得到代码布局信息。可事先根据各种可能存在的界面元素的属性信息进行代码编码，以得到代码层面的属性信息。将各种可能存在的布局信息对应的代码布局信息以及各种可能存在的界面元素的属性信息对应的代码层面的属性信息，存入代码库中。
这样，后续即可根据布局信息，从代码库中匹配出相应的代码布局信息。根据布局信息中各界面元素的属性信息，从所述代码库中匹配出代码布局信息中各节点在代码层面的属性信息。其中，布局信息中的界面元素与代码布局信息中的节点一一对应。
在一种可实现的方案中，所述各界面元素包括：第一界面元素。上述1032中“根据所述第一界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中与所述第一界面元素对应的第一节点在代码层面的属性信息”，具体为：根据所述第一界面元素的类型属性，在所述代码库中匹配出所述第一节点在代码层面的类型属性；根据所述第一界面元素的显示属性，在所述代码库中匹配出所述第一节点在代码层面的显示属性。其中，显示属性可包括：填充内容以及填充内容的样式。
为了增加生成的界面代码的可读性，需要将布局信息中各界面元素的命名作为代码布局信息中相应节点的命名。为了更加贴近真实场景下开发的代码编写，上述103中“根据所述布局信息，生成界面代码”，还包括：
1034、在根据所述布局信息，获取对应的代码布局信息之前，按照语义化命名规则，对所述布局信息中各界面元素进行重新命名。
语义化命名主要是针对各个界面元素的命名进行重新赋值，通过对界面元素的属性信息进行解析，得到这个命名。语义化命名规则中包括：默认规则、分组规则、NLP(Neuro-Linguistic Programming，神经语言程序学)自然语言分析、图像识别、业务规则。
此外，用户也可手动对相应界面元素的相应字段进行修改。具体地，可接收用户手写输入的字段以及用户手动绑定的待修改字段；将用户手动绑定的待修改字段替换成用户手写输入的字段，即完成字段的自动映射。
为了精简代码，可对布局信息进行扫描，识别出结构循环体；并在布局信息中标记出结构循环体；这样，后续根据布局信息，可从代码库中匹配到由循环语法精简过的代码布局信息。
进一步的，上述101中“确定待处理图像文件的界面元素信息”，具体可采用如下步骤来实现：
1011、从所述待处理图像文件中导出各图层的图层属性信息。
1012、对所述各图层的图层属性信息进行预设规则处理。
1013、将预测规则处理后的各图层的图层属性信息作为所述界面元素信息中各界面元素的属性信息。
其中，所述图层属性信息中包括名称、类型、坐标、宽高、绘制顺序、填充内容以及填充内容的样式。
上述1011中，可借助设计软件提供的应用程序接口来导出各图层的图层属性信息。
上述1012中，可对所述各图层的图层属性信息进行预设规则处理的步骤包括以下至少一项：
第一项：通过对所述各图层进行图层冗余及顺序校验，删除其中无用图层的图层属性信息。
其中，无用图层指的是被其他图层完全覆盖的图层或者在绘制用户界面过程中没有引起用户界面变化的图层。
第二项：通过对所述各图层进行图层类型校验，修正图层类型有误的图层的图层类型。
例如：shape类型图层很容易被识别成图片类型图层，因此，需要进行修正。
第三项：通过对所述各图层进行图层合并校验，将具有合并关联性的多个图层合并成一个图层。
具体地：根据多个图层的连接状态以及像素差异，来判断多个图层是否具有合并关联性。例如：多个图层的边界存在重合部分且多个图层的像素差异小于预设阈值，则判定多个图像具有合并关联性。
需要补充的是，上述第一项、第二项以及第三项还可借助OpenCV来实现图层校验。
第四项：结合所述待处理图像文件的设计工具的设计规则，对所述各图层的图层属性信息进行修正。
不同设计工具的设计规则不同，因此，需要根据不同设计工具的设计规则来对各图层的图层属性信息进行修正。
第五项：将所述各图层的图层属性信息转换成预设格式的数据。
具体地，预设格式可以为Json格式。Json格式是一种轻量级的数据交换格式。需要补充的是：在将所述各图层的图层属性信息转换成预设格式的数据之前，将图片类型界面元素对应的图片上传至服务端，例如：CDN(Content Delivery Network，即内容分发网络)上进行存储，并接收服务端返回的图片存储地址，将该图片存储地址作为图片类型界面元素的属性信息的一部分。
当所述待处理图像文件为设计图时，上述1011中“从所述待处理图像文件中导出各图层的图层属性信息”具体可采用如下步骤来实现：
S31、对所述设计图进行文字以及图像识别，以从所述设计图中分离出多个图层。
S32、对所述多个图层进行图层类型识别，以确定所述多个图层的图层类型。
通过OCR(Optical Character Recognition，光学字符识别)识别解析文字入手，分离出文本类型图层。再进一步外扩漫水寻找到其他类型的轮廓，拟合出各个轮廓所对应的图层类型以及图层的其他属性数据。
具体实施时，可先对设计图进行OCR识别，以得到多个类文本层。具体地，先对设计图进行整体OCR识别，得到多个文字ROI(region of interest，感兴趣区域)。从每一个文字ROI中通过内外轮廓提取单字，提取到单字后，对单字进行单字处理：颜色聚合以及对文本颜色、位置、字体大小等单字信息进行提取。可绑定文字ROI与从该文字ROI中提取到的单字信息。在提取到设计图中所有单字后，寻找单字的联通区域，并绑定每一个联通区域与每一个联通区域所包含的单字信息。得到多个联通区域后，可根据联通区域中单字的文本颜色、位置、字体大小，合并相近联通区域。将最终得到的每一个联通区域作为一个类文本层。
判断类文本层中的字体是否为标准字体模型，若是，则判定类文本层为文本类型图层；若不是，则将类文本层作为类图片层。
将多个类文本层聚合成文字层；在设计图中去除文本层，并通过噪声去除、强化边缘、连续区域过滤等预处理后，得到稳定图片层；通过图像识别从稳定图片层中确定出多个类图片层的轮廓信息；根据多个类图片层的轮廓信息对设计图进行切割，得到多个类图片层。
若类图片层中不存在文本，则判断该类图片层是否包含浮层；若包含浮层，则分离出浮层，并将分离出浮层后的类图片层确定为图片类型图层。
若类图片层中存在文本，则识别包含文字的区块，以判断该区块是否为类shape层；该区块为类shape层时，进一步判断该区块是不是input或textarea图层；若不是input或textarea图层，则判定该区块为shape类型图层。此外，从类图片层中去除该区块，并对类图片层进行图像修复。判断修复后的类图片层是否包含浮层；若包含浮层，则分离出浮层，并将分离出浮层后的类图片层确定为图片类型图层。
此外，得到界面代码后，可通过执行界面代码直接渲染所对应的UI模块视觉来达到视觉稿所见所得的效果，并能保障视觉的还原度，提高开发初次模块开发的效率，缩短开发跟视觉的协调周期。
图2示出了本申请又一实施例提供的界面代码的生成方法的流程示意图。如图2所示，该方法包括：
201、显示操作界面，以供用户输入待处理图像数据。
202、响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码。
上述201中，用户可在操作界面导入待处理图像数据。待处理图像数据可以为待处理图像文件或从待处理图像文件中导出的界面元素信息。其中，待处理图像文件可以为设计稿或设计图。设计稿指的是UI设计师通过设计软件制作出来的原始文件，该原始文件中通常会包含有多个图层；设计图指的是基于设计稿生成的图片，例如：截图。具体实施时，待处理图像文件可以为一UI模块对应的设计稿或设计图。
上述201中，操作界面上显示有第一控件，响应于用户对第一控件的触控操作，生成界面代码生成指令。当然，操作界面上还可显示有语言输入按钮，用户长按该语言输入语言信息；根据用户的语言信息，生成界面代码生成指令。
本申请实施例提供的技术方案中，为用户提供一操作界面，用户在该操作界面导入待处理图像文件；响应于用户对该操作界面触发的界面代码生成指令，基于待处理图像文件，生成界面代码。可见，本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。
进一步的，上述方法，还可包括：
203、在所述操作界面上显示至少一种代码语言类型对应的控件，以供所述用户选择。
代码语言类型包括但不限于：HTML(HyperText Markup Language，超级文本标记语言)、Vue、Rax。后续，即可生成用户选择的代码语言类型的界面代码。
进一步的，上述方法，还可包括：
204、响应于所述用户对第一代码语言类型对应的控件的触发操作，生成所述界面代码生成指令，所述界面代码生成指令中携带有所述第一代码语言类型。
相应的，上述202中“基于所述待处理图像数据，生成界面代码”，具体包括：
2021、确定所述第一代码语言类型对应的代码库。
2022、结合所述代码库，基于所述待处理图像数据，生成界面代码。
上述2021中，可事先为各种代码语言类型建立对应的代码库。
上述2021的具体实现可参见上述各实施例中相应内容，在此不再赘述。
进一步的，待处理图像数据为从待处理图像文件中导出的界面元素信息。上述202中“基于所述待处理图像数据，生成界面代码”，具体包括如下几个步骤：
2023、基于所述界面元素信息，确定界面的布局信息。
2024、根据所述布局信息，生成界面代码。
上述2023以及2024具体可参见上述各实施例中相应内容，在此不再赘述。
这里需要说明的是：本申请实施例提供的所述方法除了包含上述各步骤外，还可包含上述各实施例中的全部或部分步骤，具体可参见上述实施例中的相应内容，此处不再赘述。
下面将结合图7、图8、图9对本申请实施例提供的界面代码的生成方法进行整体介绍：
51、粘贴界面元素信息。
可在图9显示的操作界面上的数据粘贴框701处粘贴界面元素信息。设计软件插件可将从待处理图像文件中导出的界面元素信息缓存在剪切板中。
52、布局识别，以得到布局信息。
53、对界面元素进行语义化命名。
语义化命名的规则可包括默认配置的规则和用户手动绑定的规则。用户可通过图9所示的操作界面上的“快捷绑定”操作区域703进行手动绑定。
54、界面元素信息进行相似性扫描，识别并标记结构循环体。
55、多DSL(domain-specific language，领域特定语言)转换导出。
其中，DSL可以为HTML、Vue、Rax等。
56、界面代码输出。
其中，如图8所示，上述步骤52可具体包括如下步骤：
501、对界面元素信息进行顺序扫描。
502、边界重叠修整。
即修正部分数据可能存在溢出以及微小交叉的情况。
503、基于界面元素的位置交叉情况确定初始父子节点关系
504、新增第一容器节点以容纳作为父节点的图片/文本类型界面元素及其子节点
505、父子节点关系确认输出。
506、对父节点下的子节点进行各行各列边界扫描。
507、对父节点下的子节点进行各行各列的Flex布局属性确认。
508、获取所有行的Flex布局属性。
509、判断所有行或所有列的flex布局属性是否可收敛到父节点。
510、在父节点上添加flex属性。
511、为各行新增一个第二容器节点，添加flex属性。
512、剔除一定规则下多余的flex属性。
513、对父子关系为交叉关系的父子节点进行绝对定位布局。
514、输出布局信息.。
上述步骤的具体实现可参见上述各实施例中相应内容，在此不再赘述。
图3示出了本申请又一实施例提供的界面代码的生成装置的结构框图。如图3所示，该装置，包括：第一确定模块301、第二确定模块302和第一生成模块303。其中，
第一确定模块301，用于确定待处理图像文件的界面元素信息；
第二确定模块302，用于基于所述界面元素信息，确定界面的布局信息；
第一生成模块303，用于根据所述布局信息，生成界面代码。
本申请实施例提供的技术方案中，先从待处理图像文件中导出界面元素信息，根据界面元素信息，确定出界面的布局信息，再根据布局信息自动生成界面代码。可见，本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。
进一步的，第二确定模块302，具体用于：
基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；
根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息。
进一步的，第二确定模块302，具体用于：
基于各界面元素的位置信息及绘制顺序信息，确定所述各界面元素之间的初始父子节点关系；
在所述初始父子节点关系中，若存在指定类界面元素作为父节点的情况，则在所述初始父节点关系中新增一第一容器节点来容纳所述指定类界面元素及所述指定类界面元素的子节点，以得到所述父子节点关系。
进一步的，所述各父节点中包括第一类父节点；第二确定模块302，具体用于：
根据所述至少一个第一子节点的位置信息，确定所述至少一个第一子节点的行列信息以及所述至少一个第一子节点中各第一子节点的四周间距信息。
进一步的，上述装置，还包括：
第三确定模块，用于根据所述至少一个第一子节点中各第一子节点的四周间距信息，确定各行的伸缩布局属性和各列的伸缩布局属性；
第四确定模块，用于根据所述各行的伸缩布局属性和各列的伸缩布局属性，确定对所述布局信息的修正方案。
进一步的，第四确定模块，具体用于：
所述各行的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一行的伸缩布局属性；
所述各列的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一列的伸缩布局属性；
所述各行的伸缩布局属性和所述各列的伸缩布局属性均不一致时，在所述布局信息中，为各行新增一第二容器节点以容纳各行上的第一子节点，并为各行新增的所述第二容器节点添加各行对应的伸缩布局属性，其中，各行的所述第二容器节点为所述第一类父节点的子节点。
进一步的，所述各父节点中包括第二类父节点；第二确定模块302，具体用于：
根据所述第二类父节点以及所述至少一个第二子节点的位置信息，对所述至少一个第二子节点进行绝对定位布局，以得到所述至少一个第二子节点的分布信息。
进一步的，第一生成模块303，具体用于：
根据所述布局信息，从代码库中匹配出相应的代码布局信息；
根据所述布局信息中各界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中各节点在代码层面的属性信息；
将所述各节点在代码层面的属性信息添加至所述代码布局信息中，以得到所述界面代码。
进一步的，所述各界面元素包括：第一界面元素；以及，第一生成模块303，具体用于：
根据所述第一界面元素的类型属性，在所述代码库中匹配出所述第一节点在代码层面的类型属性；
根据所述第一界面元素的显示属性，在所述代码库中匹配出所述第一节点在代码层面的显示属性。
进一步的，第一生成模块303，还用于：
在根据所述布局信息，获取对应的代码布局信息之前，按照语义化命名规则，对所述布局信息中各界面元素进行重新命名。
进一步的，所述界面元素信息包括：各界面元素的属性信息；
所述属性信息包括以下项中的至少一项：名称、类型、坐标、宽高、绘制顺序、填充内容以及填充内容的样式。
进一步的，第一确定模块301，具体用于：
从所述待处理图像文件中导出各图层的图层属性信息，所述图层属性信息中包括名称、类型、坐标、宽高、绘制顺序、填充内容以及填充内容的样式；
对所述各图层的图层属性信息进行预设规则处理；将预测规则处理后的各图层的图层属性信息作为所述界面元素信息中各界面元素的属性信息。
进一步的，第一确定模块301，具体用于执行以下至少一项：
通过对所述各图层进行图层冗余及顺序校验，删除其中无用图层的图层属性信息；
通过对所述各图层进行图层类型校验，修正图层类型有误的图层的图层类型；
通过对所述各图层进行图层合并校验，将具有合并关联性的多个图层合并成一个图层；
结合所述待处理图像文件的设计工具的设计规则，对所述各图层的图层属性信息进行修正；
将所述各图层的图层属性信息转换成预设格式的数据。
进一步的，所述待处理图像文件为设计图；第一确定模块301，具体用于：
对所述设计图进行文字以及图像识别，以从所述设计图中分离出多个图层；
对所述多个图层进行图层类型识别，以确定所述多个图层的图层类型。
这里需要说明的是：上述实施例提供的生成装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。
图4示出了本申请又一实施例提供的界面代码的生成装置的结构框图。该装置，包括：
第一显示模块401，用于显示操作界面，以供用户输入待处理图像数据；
第二生成模块402，用于响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码。
本申请实施例提供的技术方案中，为用户提供一操作界面，用户在该操作界面导入待处理图像文件；响应于用户对该操作界面触发的界面代码生成指令，基于待处理图像文件，生成界面代码。可见，本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。
进一步的，第一显示模块401，还用于：
在所述操作界面上显示至少一种代码语言类型对应的控件，以供所述用户选择。
进一步的，上述装置，还包括：
第三生成模块，用于响应于所述用户对第一代码语言类型对应的控件的触发操作，生成所述界面代码生成指令，所述界面代码生成指令中携带有所述第一代码语言类型；
以及，第二生成模块，具体用于：
确定所述第一代码语言类型对应的代码库；
结合所述代码库，基于所述待处理图像数据，生成界面代码。
进一步的，待处理图像数据为从待处理图像文件中导出的界面元素信息，第二生成模块，具体用于：
基于所述界面元素信息，确定界面的布局信息；
根据所述布局信息，生成界面代码。
这里需要说明的是：上述实施例提供的生成装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。
图5为本申请一实施例提供的电子设备的结构示意图。该电子设备包括：第一存储器1101以及第一处理器1102。第一存储器1101可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令。第一存储器1101可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
所述第一处理器1102，与所述第一存储器1101耦合，用于执行所述第一存储器1101中存储的所述程序，以用于：
确定待处理图像文件的界面元素信息；
基于所述界面元素信息，确定界面的布局信息；
根据所述布局信息，生成界面代码。
其中，第一处理器1102在执行第一存储器1101中的程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面各实施例的描述。
进一步，如图5所示，电子设备还包括：第一通信组件1103、第一显示器1104、第一电源组件1105、第一音频组件1106等其它组件。图5中仅示意性给出部分组件，并不意味着电子设备只包括图5所示组件。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的物体定位方法的步骤或功能。
图6示出了本申请一实施例提供的电子设备的结构示意图。如图所示，所述电子设备包括第二显示器1204、第二存储器1201以及第二处理器1202。第二存储器1201可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令。第二存储器1201可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
所述第二显示器1204，与所述第二处理器1202耦合，用于显示操作界面，以供用户输入待处理图像数据；
所述第二处理器1202，与所述第二存储器1201耦合，用于执行所述第二存储器1201中存储的所述程序，以用于：
响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码。
其中，第二处理器1202在执行第二存储器1201中的程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面各实施例的描述。
进一步，如图6所示，电子设备还包括：第二通信组件1203、第二电源组件205、第二音频组件1206等其它组件。图6中仅示意性给出部分组件，并不意味着电子设备只包括图6所示组件。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的物体定位方法步骤或功能。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (19)
1.一种界面代码的生成方法，其特征在于，包括：
确定待处理图像文件的界面元素信息；
基于所述界面元素信息，确定界面的布局信息，包括：根据任意两个界面元素的位置信息，确定所述任意两个界面元素之间是否存在重叠部分；当所述两个界面元素之间存在重叠部分时，根据所述任意两个界面元素的绘制顺序信息，将所述任意两个界面元素中先绘制的界面元素作为父节点，将后绘制的界面元素作为所述父节点的子节点；遍历所有界面元素后，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息；
根据所述布局信息，生成界面代码。
2.根据权利要求1所述的方法，其特征在于，基于所述界面元素信息，确定界面的布局信息，包括：
基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；
根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息。
3.根据权利要求2所述的方法，其特征在于，基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系，包括：
基于各界面元素的位置信息及绘制顺序信息，确定所述各界面元素之间的初始父子节点关系；
在所述初始父子节点关系中，若存在指定类界面元素作为父节点的情况，则在初始父节点关系中新增一第一容器节点来容纳所述指定类界面元素及所述指定类界面元素的子节点，以得到所述父子节点关系。
4.根据权利要求2所述的方法，其特征在于，所述各父节点中包括第一类父节点；
以及，确定所述第一类父节点的至少一个第一子节点的分布信息，包括：
根据所述至少一个第一子节点的位置信息，确定所述至少一个第一子节点的行列信息以及所述至少一个第一子节点中各第一子节点的四周间距信息。
5.根据权利要求4所述的方法，其特征在于，还包括：
根据所述至少一个第一子节点中各第一子节点的四周间距信息，确定各行的伸缩布局属性和各列的伸缩布局属性；
根据所述各行的伸缩布局属性和所述各列的伸缩布局属性，确定对所述布局信息的修正方案。
6.根据权利要求5所述的方法，其特征在于，根据所述各行的伸缩布局属性和所述各列的伸缩布局属性，确定对所述布局信息的修正方案，包括：
所述各行的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一行的伸缩布局属性；
所述各列的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一列的伸缩布局属性；
所述各行的伸缩布局属性不一致时且所述各列的伸缩布局属性也不一致时，在所述布局信息中，为各行新增一第二容器节点以容纳各行上的第一子节点，并为各行新增的所述第二容器节点添加各行对应的伸缩布局属性，其中，各行的所述第二容器节点为所述第一类父节点的子节点。
7.根据权利要求2所述的方法，其特征在于，所述各父节点中包括第二类父节点；
以及，确定所述第二类父节点的至少一个第二子节点的分布信息，包括：
根据所述第二类父节点以及所述至少一个第二子节点的位置信息，对所述至少一个第二子节点进行绝对定位布局，以得到所述至少一个第二子节点的分布信息。
8.根据权利要求1至7中任一项所述的方法，其特征在于，根据所述布局信息，生成界面代码，包括：
根据所述布局信息，从代码库中匹配出相应的代码布局信息；
根据所述布局信息中各界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中各节点在代码层面的属性信息；
将所述各节点在代码层面的属性信息添加至所述代码布局信息中，以得到所述界面代码。
9.根据权利要求8所述的方法，其特征在于，所述各界面元素包括：第一界面元素；
以及，根据所述第一界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中与所述第一界面元素对应的第一节点在代码层面的属性信息，包括：
根据所述第一界面元素的类型属性，在所述代码库中匹配出所述第一节点在代码层面的类型属性；
根据所述第一界面元素的显示属性，在所述代码库中匹配出所述第一节点在代码层面的显示属性。
10.根据权利要求8所述的方法，其特征在于，根据所述布局信息，生成界面代码，还包括：
在根据所述布局信息，获取对应的代码布局信息之前，按照语义化命名规则，对所述布局信息中各界面元素进行重新命名。
11.根据权利要求1至7中任一项所述的方法，其特征在于，所述界面元素信息包括：各界面元素的属性信息；
所述属性信息包括以下项中的至少一项：名称、类型、坐标、宽高、绘制顺序、填充内容以及填充内容的样式。
12.根据权利要求1至7中任一项所述的方法，其特征在于，确定待处理图像文件的界面元素信息，包括：
从所述待处理图像文件中导出各图层的图层属性信息，所述图层属性信息中包括名称、类型、坐标、宽高、绘制顺序、填充内容以及填充内容的样式；
对所述各图层的图层属性信息进行预设规则处理；
将预测规则处理后的各图层的图层属性信息作为所述界面元素信息中各界面元素的属性信息。
13.根据权利要求12所述的方法，其特征在于，对所述各图层的图层属性信息进行预设规则处理的步骤包括以下至少一项：
通过对所述各图层进行图层冗余及顺序校验，删除其中无用图层的图层属性信息；
通过对所述各图层进行图层类型校验，修正图层类型有误的图层的图层类型；
通过对所述各图层进行图层合并校验，将具有合并关联性的多个图层合并成一个图层；
结合所述待处理图像文件的设计工具的设计规则，对所述各图层的图层属性信息进行修正；
将所述各图层的图层属性信息转换成预设格式的数据。
14.根据权利要求12所述的方法，其特征在于，所述待处理图像文件为设计图；
从所述待处理图像文件中导出各图层的图层属性信息，包括：
对所述设计图进行文字以及图像识别，以从所述设计图中分离出多个图层；
对所述多个图层进行图层类型识别，以确定所述多个图层的图层类型。
15.一种界面代码的生成方法，其特征在于，包括：
显示操作界面，以供用户输入待处理图像数据；
响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码；
所述待处理图像数据为从待处理图像文件中导出的界面元素信息；
基于所述待处理图像数据，生成界面代码，包括：
基于所述界面元素信息，确定界面的布局信息，包括：根据任意两个界面元素的位置信息，确定所述任意两个界面元素之间是否存在重叠部分；当所述两个界面元素之间存在重叠部分时，根据所述任意两个界面元素的绘制顺序信息，将所述任意两个界面元素中先绘制的界面元素作为父节点，将后绘制的界面元素作为所述父节点的子节点；遍历所有界面元素后，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息；
根据所述布局信息，生成界面代码。
16.根据权利要求15所述的方法，其特征在于，还包括：
在所述操作界面上显示至少一种代码语言类型对应的控件，以供所述用户选择。
17.根据权利要求16所述的方法，其特征在于，还包括：
响应于所述用户对第一代码语言类型对应的控件的触发操作，生成所述界面代码生成指令，所述界面代码生成指令中携带有所述第一代码语言类型；
以及，基于所述待处理图像文件，生成界面代码，包括：
确定所述第一代码语言类型对应的代码库；
结合所述代码库，基于所述待处理图像数据，生成界面代码。
18.一种电子设备，其特征在于，包括：第一存储器和第一处理器，其中，
所述第一存储器，用于存储程序；
所述第一处理器，与所述第一存储器耦合，用于执行所述第一存储器中存储的所述程序，以用于：
确定待处理图像文件的界面元素信息；
基于所述界面元素信息，确定界面的布局信息，包括：根据任意两个界面元素的位置信息，确定所述任意两个界面元素之间是否存在重叠部分；当所述两个界面元素之间存在重叠部分时，根据所述任意两个界面元素的绘制顺序信息，将所述任意两个界面元素中先绘制的界面元素作为父节点，将后绘制的界面元素作为所述父节点的子节点；遍历所有界面元素后，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息；
根据所述布局信息，生成界面代码。
19.一种电子设备，其特征在于，包括：第二存储器、第二处理器和第二显示器，其中，
所述第二存储器，用于存储程序；
所述第二显示器，与所述第二处理器耦合，用于显示操作界面，以供用户输入待处理图像数据；
所述第二处理器，与所述第二存储器耦合，用于执行所述第二存储器中存储的所述程序，以用于：
响应于所述用户通过所述操作界面触发的界面代码生成指令，基于所述待处理图像数据，生成界面代码；
所述待处理图像数据为从待处理图像文件中导出的界面元素信息；
基于所述待处理图像数据，生成界面代码，包括：
基于所述界面元素信息，确定界面的布局信息，包括：根据任意两个界面元素的位置信息，确定所述任意两个界面元素之间是否存在重叠部分；当所述两个界面元素之间存在重叠部分时，根据所述任意两个界面元素的绘制顺序信息，将所述任意两个界面元素中先绘制的界面元素作为父节点，将后绘制的界面元素作为所述父节点的子节点；遍历所有界面元素后，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息；
根据所述布局信息，生成界面代码。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910010012.5A CN111414165B (zh) | 2019-01-06 | 2019-01-06 | 界面代码的生成方法及设备 |
| PCT/CN2020/070059 WO2020140932A1 (zh) | 2019-01-06 | 2020-01-02 | 界面代码的生成方法及设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910010012.5A CN111414165B (zh) | 2019-01-06 | 2019-01-06 | 界面代码的生成方法及设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111414165A CN111414165A (zh) | 2020-07-14 |
| CN111414165B true CN111414165B (zh) | 2024-04-02 |
Family
ID=71407281
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910010012.5A Active CN111414165B (zh) | 2019-01-06 | 2019-01-06 | 界面代码的生成方法及设备 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN111414165B (zh) |
| WO (1) | WO2020140932A1 (zh) |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111857704A (zh) * | 2020-07-31 | 2020-10-30 | 北京爱奇艺科技有限公司 | 一种布局关系的代码生成方法及装置 |
| CN112099773A (zh) * | 2020-09-14 | 2020-12-18 | 济南浪潮高新科技投资发展有限公司 | 一种实现桌面应用开发方法 |
| CN112328234B (zh) * | 2020-11-02 | 2023-12-08 | 广州博冠信息科技有限公司 | 图像处理方法及装置 |
| CN113296769A (zh) * | 2020-11-18 | 2021-08-24 | 阿里巴巴集团控股有限公司 | 数据处理方法、视觉稿的处理方法、系统及电子设备 |
| CN112416363B (zh) * | 2020-12-09 | 2024-03-19 | 锐捷网络股份有限公司 | 一种前后端crud代码的生成方法及装置 |
| CN113778403B (zh) * | 2021-01-15 | 2024-07-16 | 北京沃东天骏信息技术有限公司 | 前端代码生成方法和装置 |
| CN112835579B (zh) * | 2021-02-04 | 2024-07-19 | 北京百度网讯科技有限公司 | 确定界面代码的方法、装置、电子设备和存储介质 |
| CN113051632A (zh) * | 2021-03-30 | 2021-06-29 | 厦门极致互动网络技术股份有限公司 | 一种基于PhotoShop的颜色导出方法 |
| CN113553635B (zh) * | 2021-06-28 | 2024-10-01 | 通号城市轨道交通技术有限公司 | 图库图元配置方法、装置、电子设备和存储介质 |
| CN113672227B (zh) * | 2021-08-30 | 2024-04-23 | 北京爱奇艺科技有限公司 | 用户界面代码生成方法、装置、电子设备及存储介质 |
| CN113835704B (zh) * | 2021-09-27 | 2024-05-10 | 中电金信软件有限公司 | 一种布局文件生成方法、装置、设备以及存储介质 |
| CN114816409B (zh) * | 2022-06-27 | 2022-10-04 | 北京尽微致广信息技术有限公司 | 界面生成方法、装置以及存储介质 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104252356A (zh) * | 2013-06-28 | 2014-12-31 | 腾讯科技（深圳）有限公司 | 生成界面的方法和系统 |
| CN105354022A (zh) * | 2015-10-16 | 2016-02-24 | 华为技术有限公司 | 一种页面布局文件生成方法及装置 |
| CN108228183A (zh) * | 2018-01-12 | 2018-06-29 | 北京三快在线科技有限公司 | 前端界面代码生成方法、装置、电子设备及存储介质 |
| CN108255489A (zh) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | 前端界面代码生成方法、装置、电子设备及存储介质 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
| CN108334386A (zh) * | 2017-01-20 | 2018-07-27 | 阿里巴巴集团控股有限公司 | 一种视图组件的布局方法及系统 |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9286038B2 (en) * | 2013-06-19 | 2016-03-15 | Microsoft Technology Licensing, Llc | Interface development and operation |
| US10191889B2 (en) * | 2014-07-29 | 2019-01-29 | Board Of Regents, The University Of Texas System | Systems, apparatuses and methods for generating a user interface by performing computer vision and optical character recognition on a graphical representation |
| US11816459B2 (en) * | 2016-11-16 | 2023-11-14 | Native Ui, Inc. | Graphical user interface programming system |
| CN108804093A (zh) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | 一种代码生成方法和电子设备 |
-
2019
- 2019-01-06 CN CN201910010012.5A patent/CN111414165B/zh active Active
-
2020
- 2020-01-02 WO PCT/CN2020/070059 patent/WO2020140932A1/zh active Application Filing
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104252356A (zh) * | 2013-06-28 | 2014-12-31 | 腾讯科技（深圳）有限公司 | 生成界面的方法和系统 |
| CN105354022A (zh) * | 2015-10-16 | 2016-02-24 | 华为技术有限公司 | 一种页面布局文件生成方法及装置 |
| CN108334386A (zh) * | 2017-01-20 | 2018-07-27 | 阿里巴巴集团控股有限公司 | 一种视图组件的布局方法及系统 |
| CN108228183A (zh) * | 2018-01-12 | 2018-06-29 | 北京三快在线科技有限公司 | 前端界面代码生成方法、装置、电子设备及存储介质 |
| CN108255489A (zh) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | 前端界面代码生成方法、装置、电子设备及存储介质 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
Non-Patent Citations (2)
| Title |
|---|
| 张晶 ; 黄小锋 ; .基于业务模型和界面模型的代码生成工具.电脑与信息技术.2016,(02),全文. * |
| 朱亚迪 ; 吴毅坚 ; 赵文耘 ; .基于代码片段复用的安卓应用组装技术研究.计算机应用与软件.2016,(11),全文. * |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2020140932A1 (zh) | 2020-07-09 |
| CN111414165A (zh) | 2020-07-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111414165B (zh) | 界面代码的生成方法及设备 | |
| US10191889B2 (en) | Systems, apparatuses and methods for generating a user interface by performing computer vision and optical character recognition on a graphical representation | |
| CN108228183B (zh) | 前端界面代码生成方法、装置、电子设备及存储介质 | |
| CN109117228A (zh) | 图形界面的生成方法及装置 | |
| CN113609820B (zh) | 基于可扩展标记语言文件生成word文件的方法、装置及设备 | |
| CN1867894A (zh) | 通过草拟自动生成用户界面描述 | |
| CN111352628A (zh) | 一种前端代码生成方法、装置、计算机系统及可读存储介质 | |
| KR101950126B1 (ko) | 수학공식 처리방법, 장치, 설비 및 컴퓨터 저장 매체 | |
| CN109240687A (zh) | 图形界面描述文件的生成方法及装置 | |
| US12086534B2 (en) | Multi-component abstract association and fusion method and apparatus in page design | |
| KR101772831B1 (ko) | 중간 문자 라이브러리의 형성 방법 및 장치 | |
| CN112487334A (zh) | 用于前端页面语言翻译的方法、装置、计算机设备和介质 | |
| US20240127510A1 (en) | Stylized glyphs using generative ai | |
| CN110554860B (zh) | 一种软件项目自然语言编程接口nli的构造方法及代码生成方法 | |
| CN113296769A (zh) | 数据处理方法、视觉稿的处理方法、系统及电子设备 | |
| CN116843794A (zh) | 海报生成方法、装置、电子设备及存储介质 | |
| US9372844B2 (en) | Automatically generating a business process flow GUI using a symbolic annotation language | |
| CN115565199A (zh) | 一种核电厂图纸信息溯源方法和系统 | |
| CN115481599A (zh) | 文档的处理方法、装置、电子设备和存储介质 | |
| CN113835704A (zh) | 一种布局文件生成方法、装置、设备以及存储介质 | |
| CN114637505A (zh) | 一种页面内容提取方法和装置 | |
| CN116306573B (zh) | 工程做法的智能解析方法、装置、设备和可读存储介质 | |
| CN116580411B (zh) | 一种基于指令的文档图像处理方法及系统 | |
| CN114936542B (zh) | 表格重建方法和装置、计算机可读存储介质和电子设备 | |
| CN112860958B (zh) | 一种信息显示方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |