识别设计稿的方法、装置及电子设备制造方法及图纸

本说明书实施例提供识别设计稿的方法、装置及电子设备，其中一个方法包括：获取用户所提供的设计稿，其中，所述设计稿是图片格式的；识别设计稿中的至少一个第一组件；选择待执行进一步识别的第一组件；以及在所选择的第一组件中，识别至少一个第二组件。

【技术实现步骤摘要】
识别设计稿的方法、装置及电子设备
本说明书涉及页面设计
，更具体地，涉及一种识别设计稿的方法、自动生成网页页面的方法、装置及电子设备。
技术介绍
在进行前端网页页面设计时，可以使用设计稿。设计稿是可以用于页面设计的图稿，例如，JPEG、PNG格式的图片。计算机可以自动将设计稿中的元素识别为组件，并自动生成相应的代码，从而实现界面设计。因此，需要提供方案以在设计稿的识别过程中降低识别难度。
技术实现思路
根据本说明书的第一方面，提供了一种识别设计稿的方法，包括：获取用户所提供的设计稿，其中，所述设计稿是图片格式的；识别设计稿中的至少一个第一组件；选择待执行进一步识别的第一组件；以及在所选择的第一组件中，识别至少一个第二组件。根据本说明书的第二方面，提供了一种自动生成网页页面的方法，包括：获取用户所提供的网页设计稿，其中，所述网页设计稿是图片格式的；识别网页设计稿中的至少一个第一组件；选择待执行进一步识别的第一组件；在所选择的第一组件中，识别至少一个第二组件，以及基于所识别的第一组件和第二组件，自动生成网页页面上的元素。根据本说明书的第三方面，提供了一种识别设计稿的装置，包括：获取模块，获取用户所提供的设计稿，其中，所述设计稿是图片格式的；第一识别模块，识别设计稿中的至少一个第一组件；选择模块，选择待执行进一步识别的第一组件；以及第二识别模块，在所选择的第一组件中，识别至少一个第二组件。根据本说明书的第四方面，提供了一种电子设备，包括处理器和存储器，存储器存储可执行指令，当运行电子设备时，可执行指令控制处理器执行根据实施例的方法。根据本说明书的第四方面，提供一种存储介质，该存储介质存储可执行指令，该可执行指令在被执行时实现根据实施例的方法。在不同实施例中，在识别设计稿的过程中，首先针对较大的组件进行识别，然后再针对较小的组件进行识别，这减轻了同时针对不同大小的组件进行识别处理所带来的处理量，从而减小了整体识别难度。通过以下参照附图对本说明书的示例性实施例的详细描述，本说明书的实施例的其它特征及其优点将会变得清楚。附图说明被结合在说明书中并构成说明书的一部分的附图示出了的实施例，并且连同其说明一起用于解释各个实施例的原理。图1示出了根据一个实施例的识别设计稿的方法的示意性流程图。图2示出了根据一个实施例的自动生成网页页面的方法的示意性流程图。图3示出了根据一个实施例的识别设计稿的装置的示意性框图。图4示出了根据一个实施例的电子设备的示意性框图。图5-8示出了一个识别设计稿的示例性例子。图9示出了在网络情况下多个用户协同使用设计稿来设计前端页面的情景。图10示出了设计稿协同设计系统的例子。具体实施方式以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本专利技术及其应用或使用的任何限制。在进行网页页面设计时，设计人员可以在设计稿中绘制期望的界面元素，例如，文本框、视频框、控件等。设计人员可以使用画笔手工绘制设计稿，也可以使用绘图软件来绘制设计稿。之后，设计人员将所绘制的设计稿输入到计算机中。计算机可以自动识别设计稿中的组件，并生成相应的代码。这里的代码可以是模式化的代码。开发人员可以稍后根据需求，对所述代码进行修改，以实现期望对功能。在前端网页页面设计中使用的设计稿可以被称为网页设计稿。此外，在其他应用软件的界面设计中，也可以借助于设计稿，帮助设计人员设计应用软件的界面。在计算机识别设计稿的过程中，计算机扫描设计稿中的所有元素，并且对这些元素进行识别，以产生相应的组件。在计算机进行扫描时，需要同时处理较大的组件和较小的组件，这种方式所占用的计算资源较多。此外，在计算机一次性地扫描所有组件的过程中，组件和组件之间的嵌套关系信息可能会被丢失。因此，这里提出了一种新的识别设计稿的方案。下面，参照附图描述本说明书的不同实施例和例子。图1示出了根据一个实施例的识别设计稿的方法的示意性流程图。设计人员可以使用画笔手动绘制设计稿，也可以利用计算机中的绘图软件绘制设计稿。在手工绘制的情况下，可以通过扫描仪或照相机将所绘制的设计稿被输入到计算机中。在使用绘图软件的情况下，在设计人员绘制设计稿之后，他可以将设计稿保存到计算机中。接着，由计算机执行处理以识别设计稿。图1示出了可以在计算机中执行的方法的步骤。如图1所示，在步骤S102，获取用户所提供的设计稿。设计稿是图片格式的，例如，JPEG、PNG等格式。在步骤S104，识别设计稿中的至少一个第一组件。例如，可以基于设计稿中的颜色改变，确定第一组件的第一轮廓，接着，沿第一轮廓，将第一组件从设计稿中裁剪出来。可以直接将所裁剪的区域作为所识别的第一组件；也可以根据系统配置，继续识别所裁剪的区域中的内容，例如，文本、控件等，从而完成第一组件的识别。在步骤S106，选择待执行进一步识别的第一组件。可以选择全部第一组件进行再次识别，也可以选择其中的部分第一组件进行识别。例如，一些第一组件中不再包含其他元素，例如，线条、文字等，可以不再对这样的第一组件执行进一步识别。在步骤S108，在所选择的第一组件中，识别至少一个第二组件。例如，可以基于第一组件中的颜色改变，确定第二组件的第二轮廓，接着，沿第二轮廓，将第一组件从设计稿中裁剪出来。尽管在这里，就第一组件和第二组件描述了一个识别过程，但是，本领域技术人员应当理解，可以将当前的第二组件作为下一个识别过程中的第一组件，继续执行上面描述的方法。在这里，先识别较大的组件，然后再识别较小的组件，而不需要一次性地识别较小组件。可以将较小组件剪裁处理进行识别。这样可以降低较小组件识别难度。设计稿可以包括多个第一组件。多个第一组件是互相分离的，或者可以部分重叠。此外，设计稿也可以包括多个第二组件，所述多个第二组件也可以是互相分离的，或者可以部分重叠。此外，通过这种分层次的识别方式，可以方便保留设计稿的嵌套结构。例如，可以基于第一组件和第二组件的识别顺序，记录第一组件和第二组件的嵌套关系。这样，可以在识别过程中自然产生设计稿的嵌套结构，从而提升了处理效率，节省了处理资源。此外，通过这种方式，还可以为识别处理提供更高的自由度。可以针对不同层次的组件采用不同的识别方式。例如，较大第一组件可以仅用于划分页面中的不同功能区域，较小的组件包括注释说明部分以及输入控件。因此，可以如上面步骤S104所述的那样，通过图像区域识别来识别第一组件的区域范围。此外，可以通过文本识别来识别第一组件内的第二组件的文本，通过组件属性识别来识别第二组件的组件属性，例如，文本框、视频框等。可以以第一识别分辨率，识别第一组件；以及以第二识别分辨率，识别第二组件，其中，第二识别分辨率大于第一分辨率。通过这种方式，在识别较大的第一组件时使用较小识别分辨率，从而节省识别时的处理资源。而在识别较小的第二组件时可以采用较高识别分辨率，本文档来自技高网...

【技术保护点】
1.一种识别设计稿的方法，包括：/n获取用户所提供的设计稿，其中，所述设计稿是图片格式的；/n识别设计稿中的至少一个第一组件；/n选择待执行进一步识别的第一组件；以及/n在所选择的第一组件中，识别至少一个第二组件。/n

【技术特征摘要】
1.一种识别设计稿的方法，包括：
获取用户所提供的设计稿，其中，所述设计稿是图片格式的；
识别设计稿中的至少一个第一组件；
选择待执行进一步识别的第一组件；以及
在所选择的第一组件中，识别至少一个第二组件。


2.根据权利要求1所述的方法，还包括：
在第一识别处理中，识别所述第一组件和第二组件中的第一信息；
在第二识别处理中，识别所述第一组件和第二组件中的第二信息；以及
以链表的方式，记录所述第一信息和第二信息以及对应的第一组件和第二组件。


3.根据权利要求1所述的方法，其中，识别设计稿中的至少一个第一组件包括：
基于设计稿中的颜色改变，确定第一组件的第一轮廓；以及
沿所述第一轮廓，将第一组件从设计稿中裁剪出来，
其中，识别至少一个第二组件包括：
基于第一组件中的颜色改变，确定第二组件的第二轮廓；以及
沿所述第二轮廓，将第一组件从设计稿中裁剪出来。


4.根据权利要求1所述的方法，其中，识别设计稿中的至少一个第一组件包括：以第一识别分辨率，识别第一组件；以及
识别至少一个第二组件包括：以第二识别分辨率，识别第二组件，
其中，第二识别分辨率大于第一分辨率。


5.根据权利要求1所述的方法，其中，识别设计稿中的至少一个第一组件包括：
确定第一组件的第一性质，其中，所述第一性质表示该第一组件是文本框、视频框或控件；
基于第一性质，确定用于识别第一组件的第一识别方式，其中，第一识别方式包括图像区域识别、文本识别、组件属性识别中的至少一个；以及
以第一识别方式识别第一组件。


6.根据权利要求5所述的方法，其中，识别至少一个第二组件包括：
确定第二组件的第二性质，其中，所述第二性质表示该第二...

【专利技术属性】
技术研发人员：刘一奇，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY