页面数据的生成方法、装置及电子设备制造方法及图纸

本申请提供一种页面数据的生成方法、装置及电子设备，所述方法的一具体实施方式包括：识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；基于所述目标区域对应的特征确定所述控件各自对应的目标类型；根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；根据所述目标布局参数生成所述页面的页面结构数据。该实施方式无需在专业软件上通过人工编辑的方式设计页面，避免了资源的浪费，提高了页面从设计到转换成前端数据的过程的效率。

Method, device and electronic device for generating page data

The application provides a method, device and electronic device for generating page data. One specific embodiment of the method includes: identifying the page in the target image, the control in the page and the corresponding target area of the control; determining the corresponding target class of the control based on the corresponding characteristics of the target area. The target layout parameters of the control in the page are determined according to the target area and the target type, and the page structure data of the page are generated according to the target layout parameters. The implementation method does not need to design pages manually in professional software, avoids waste of resources, and improves the efficiency of pages from design to front-end data conversion process.

【技术实现步骤摘要】
页面数据的生成方法、装置及电子设备
本申请涉及计算机
，特别涉及一种页面数据的生成方法、装置及电子设备。
技术介绍
随着终端设备在人们工作和生活中的普及，应用于终端设备的应用程序也变得越来越多样化，对应用程序页面设计的需求也变得越来越大。目前来说，在进行页面设计时，通常需要人工在专业软件上直接进行编辑操作，从而得到设计出的页面，并生成相应的页面结构数据。但是，由于需要人工在专业软件上进行编辑，因此，操作繁琐，造成人力资源的浪费。同时，页面从设计到转换成前端数据的过程效率较低。
技术实现思路
为了解决上述技术问题之一，本申请提供一种页面数据的生成方法、装置及电子设备。根据本申请实施例的第一方面，提供一种页面数据的生成方法，包括：识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；基于所述目标区域对应的特征确定所述控件各自对应的目标类型；根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；根据所述目标布局参数生成所述页面的页面结构数据。可选的，所述根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数，包括：确定所述目标区域在所述目标图像中的原始尺寸及原始位置；基于所述原始尺寸及原始位置确定所述页面中控件的初始布局参数；根据所述目标类型及所述初始布局参数得到所述目标布局参数。可选的，所述基于所述原始尺寸及原始位置确定所述页面中控件的初始布局参数，包括：获取所述页面在所述目标图像中的尺寸作为参考尺寸；获取预设的目标尺寸；基于所述参考尺寸及所述目标尺寸确定所述页面的缩放参数；采用所述缩放参数对所述原始尺寸及原始位置进行处理，得到所述页面中控件的初始布局参数。可选的，所述根据所述目标类型及所述初始布局参数得到所述目标布局参数，包括：基于所述初始布局参数及所述目标类型确定等距排列控件组、所述等距排列控件组各自对应的控件间距、对齐排列控件组、所述对齐排列控件组各自对应的对齐方式以及所述控件各自对应的标准尺寸；其中，任一所述等距排列控件组满足预设的行/列等距排列条件，任一所述对齐排列控件组满足至少一个预设的对齐条件；按照所述等距排列控件组、所述等距排列控件组各自对应的控件间距、所述对齐排列控件组、所述对齐排列控件组各自对应的对齐方式以及所述控件各自对应的标准尺寸，确定所述目标布局参数；其中，所述初始布局参数包括所述控件各自对应的临时尺寸及临时位置。可选的，通过如下方式确定所述控件各自对应的标准尺寸：基于所述目标类型确定所述控件各自对应的备选尺寸；针对任一控件，从该控件对应的备选尺寸中选取与该控件对应的临时尺寸相似程度最高的备选尺寸作为该控件对应的标准尺寸。可选的，通过如下方式确定所述等距排列控件组各自对应的控件间距：针对任一等距排列控件组，根据该等距排列控件组中的控件各自对应的临时尺寸及临时位置，确定该等距排列控件组中相邻控件之间的距离均值，作为该等距排列控件组对应的控件间距。可选的，通过如下方式确定所述对齐排列控件组各自对应的对齐方式：针对任一对齐排列控件组，将该对齐排列控件组满足的对齐条件所对应的对齐方式确定该对齐排列控件对应的对齐方式。可选的，所述识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域，包括：确定所述目标图像中的目标轮廓；确定所述目标轮廓各自对应的轮廓层级；基于所述目标轮廓及所述轮廓层级确定所述目标图像中的页面、页面中的控件及所述控件各自对应的目标区域。可选的，所述确定所述目标图像中的目标轮廓，包括：对所述目标图像进行轮廓检测，得到多个轮廓；基于预设的筛选规则，从所述多个轮廓中筛选出目标轮廓。可选的，所述基于所述目标区域对应的特征确定所述控件各自对应的目标类型，包括：采用预先训练的分类器对所述控件各自对应的目标区域的特征进行识别，得到所述控件各自对应的目标类型。可选的，所述方法还包括：基于所述页面结构数据进行渲染，生成并输出目标页面。根据本申请实施例的第二方面，提供一种页面数据的生成装置，包括：识别模块，用于识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；第一确定模块，用于基于所述目标区域对应的特征确定所述控件各自对应的目标类型；第二确定模块，用于根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；生成模块，用于根据所述目标布局参数生成所述页面的页面结构数据。根据本申请实施例的第三方面，提供一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面中任一项所述的方法。根据本申请实施例的第四方面，提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述第一方面中任一项所述的方法。本申请的实施例提供的技术方案可以包括以下有益效果：本申请的实施例提供的页面数据的生成方法和装置，通过识别目标图像中的页面、页面中的控件及控件各自对应的目标区域，基于上述目标区域对应的特征确定控件各自对应的目标类型，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数，并根据页面中控件的目标布局参数生成页面的页面结构数据。从而无需在专业软件上通过人工编辑的方式设计页面，避免了资源的浪费，提高了页面从设计到转换成前端数据的过程的效率。应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。附图说明此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。图1A是本申请根据一示例性实施例示出的一种页面数据的生成方法的流程图；如图1B-图1E是本申请根据一示例性实施例示出的一种页面数据的生成方法的场景示意图；图2是本申请根据一示例性实施例示出的另一种页面数据的生成方法的流程；图3是本申请根据一示例性实施例示出的另一种页面数据的生成方法的流程；图4是本申请根据一示例性实施例示出的另一种页面数据的生成方法的流程；图5是本申请根据一示例性实施例示出的一种页面数据的生成装置的框图；图6是本申请根据一示例性实施例示出的另一种页面数据的生成装置的框图；图7是本申请根据一示例性实施例示出的另一种页面数据的生成装置的框图；图8是本申请根据一示例性实施例示出的另一种页面数据的生成装置的框图；图9是本申请根据一示例性实施例示出的一种电子设备的结构示意图。具体实施方式这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开本文档来自技高网...

【技术保护点】
1.一种页面数据的生成方法，其特征在于，所述方法包括：识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；基于所述目标区域对应的特征确定所述控件各自对应的目标类型；根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；根据所述目标布局参数生成所述页面的页面结构数据。

【技术特征摘要】
1.一种页面数据的生成方法，其特征在于，所述方法包括：识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；基于所述目标区域对应的特征确定所述控件各自对应的目标类型；根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；根据所述目标布局参数生成所述页面的页面结构数据。2.根据权利要求1所述的方法，其特征在于，所述根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数，包括：确定所述目标区域在所述目标图像中的原始尺寸及原始位置；基于所述原始尺寸及原始位置确定所述页面中控件的初始布局参数；根据所述目标类型及所述初始布局参数得到所述目标布局参数。3.根据权利要求2所述的方法，其特征在于，所述基于所述原始尺寸及原始位置确定所述页面中控件的初始布局参数，包括：获取所述页面在所述目标图像中的尺寸作为参考尺寸；获取预设的目标尺寸；基于所述参考尺寸及所述目标尺寸确定所述页面的缩放参数；采用所述缩放参数对所述原始尺寸及原始位置进行处理，得到所述页面中控件的初始布局参数。4.根据权利要求2所述的方法，其特征在于，所述根据所述目标类型及所述初始布局参数得到所述目标布局参数，包括：基于所述初始布局参数及所述目标类型确定等距排列控件组、所述等距排列控件组各自对应的控件间距、对齐排列控件组、所述对齐排列控件组各自对应的对齐方式以及所述控件各自对应的标准尺寸；其中，任一所述等距排列控件组满足预设的行/列等距排列条件，任一所述对齐排列控件组满足至少一个预设的对齐条件；按照所述等距排列控件组、所述等距排列控件组各自对应的控件间距、所述对齐排列控件组、所述对齐排列控件组各自对应的对齐方式以及所述控件各自对应的标准尺寸，确定所述目标布局参数；其中，所述初始布局参数包括所述控件各自对应的临时尺寸及临时位置。5.根据权利要求4所述的方法，其特征在于，通过如下方式确定所述控件各自对应的标准尺寸：基于所述目标类型确定所述控件各自对应的备选尺寸；针对任一控件，从该控件对应的备选尺寸中选取与该控件对应的临时尺寸相似程度最高的备选尺寸作为该控件对应的标准尺寸。6.根据权利要求4所述的方法，其特征在于，通过如下方式确定所述等距排列控件组各自对...

【专利技术属性】
技术研发人员：陈金辉，杨宝玲，龙婧，
申请(专利权)人：北京三快在线科技有限公司，
类型：发明
国别省市：北京,11