[发明专利]基于草图的网页生成方法和系统

说明书

本申请实施例提供了一种基于草图的网页生成方法，所述方法包括：识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案；根据所述多个元素的元素信息，生成语法树；根据所述语法树，生成网页代码；及根据所述网页代码，生成与所述草图对应的目标网页。本实施例所述的基于草图的网页生成方法可以通过草图识别得到用于网页生成的网页布局和多个元素的元素信息，并基于这些信息生成语法树并进而生成网页代码，从而实现了机器自动生成页面代码和相应的目标页面，不需要手动将所述草图转化为网页代码，从而提高网页的开发效率。

技术领域

本申请实施例涉及计算机技术领域，尤其涉及一种基于草图的网页生成方法、系统、计算机设备及计算机可读存储介质。

背景技术

随着互联网的发展，用户对页面的要求越来越高，无论是视觉设计、交互或前端都变得越来越专业，用户需要更漂亮的设计和更强大的技术来实现WEB页面，促进以下新技术：HTML5(HyperTextMarkupLanguage5，超文本标记语言第5版本)和CSS3(CascadingStyleSheets3，层叠样式表第三版本)越来越普及。另外，各种屏幕尺寸的移动终端也在不断的推陈出新，从而带来了新的挑战：前端需要兼容的屏幕尺寸越来越多。基于上述趋势，WEB开发流程变得越来越细分化，设计和开发逐渐分离成两个独立工作：UI设计和前端开发。所述WEB开发流程逐步演变为：UI设计师和前端开发工程师分享他们的想法，尽力表达出潜在的客户场景或工作流程；如果双方达成一致意见，UI设计师可以在白纸或白板上将草图画出来，并由前端开发工程师手动将草图转化为HTML代码。然而，上述转化过程常常需要耗费很多时间和精力，有可能会拖慢产品发布的时间。

可知，现有的WEB开发流程中，转化环节生成的页面代码是通过人工编写的，网页开发效率低下。因此，有必要提供一种能够自动生成页面代码的技术，以提高网页的开发效率。

发明内容

本申请实施例的目的是提供一种基于草图的网页生成方法、系统、计算机设备及计算机可读存储介质，用于解决传统网页开发效率低下、不能能够自动生成页面代码的问题。

本申请实施例的第一方面提供了一种基于草图的网页生成方法，所述方法包括：识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案；根据所述多个元素的元素信息，生成语法树；根据所述语法树，生成网页代码；及根据所述网页代码，生成与所述草图对应的目标网页。

基于第一方面的第二方面，每个元素分别通过预先定义的通用元素进行表示，所述每个元素的元素信息是按照所述通用元素的数据结构进行存储的；其中，所述通用元素的数据结构包括多个数据节点，所述多个数据节点包括元素标识、元素外部尺寸、元素内部尺寸、子元素列表数组、元素类型、父元素对象和背景颜色值。

基于第一方面的第三方面，识别所述草图以获取多个元素的元素信息，包括：沿第一方向对所述草图进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。