CN109656552B

CN109656552B - 一种基于盒子模型的设计图自动转换成网页的方法

Info

Publication number: CN109656552B
Application number: CN201811292730.8A
Authority: CN
Inventors: 刘杰; 张爱平
Original assignee: Wuhan Hangke Logistics Co ltd; CCCC Second Harbor Engineering Co
Current assignee: Wuhan Hangke Logistics Co ltd; CCCC Second Harbor Engineering Co
Priority date: 2018-11-01
Filing date: 2018-11-01
Publication date: 2022-02-15
Anticipated expiration: 2038-11-01
Also published as: CN109656552A

Abstract

本发明公开了一种基于盒子模型的设计图自动转换成网页的方法，包括：S1，将设计图进行语义化定义，使得设计图转化为盒子数据；S2，将步骤S1得到盒子数据解析、转化成网页。本发明通过对设计图进行语义化定义，生成计算机可以理解的中间语言，也就是盒子数据，然后由计算机算法自动理解设计图的盒子数据并解析生成可直接使用的网页。本发明具有提高前端效率、减少工作量，提高复用度、减少重复工作，提高输出质量、减少差异等优点，可广泛应用于设计图转化成网页的方法技术领域。

Description

一种基于盒子模型的设计图自动转换成网页的方法

技术领域

本发明涉及设计图转化成网页的方法技术领域。更具体地说，本发明涉及一种基于盒子模型的设计图自动转换成网页的方法。

背景技术

在软件开发领域中，HTML(HTML Activity)和样式(Style Activity)级联样式单(CSS)是Web与用户交互的两个接口和技术标准；由于图片的识别目前还是个难题，特别是网页设计图，所以Web设计图需要先转换成Html，目前需要前端开发人员手工切图、书写代码，是一个工作量非常大、非常耗费人力、时间的工作，与页面输出需求的及时响应、高质量的输出，形成了一定的矛盾。

盒子模型为解决这个矛盾打开了一个种思路。盒子模型中，定义页面设计图被同级的盒子标记划分成不同的部分。在盒子内部，通过标记嵌套子级盒子，进行更精细的标记；形成设计图的结构化标记。为了使根据盒子模型转化后的结构更符合html内容。盒子是具有不同类型的，比如：有的盒子是容器类型，它仅能拥有下级容器，对应页面的布局区块；有的是背景容器，可以将设计图标记为背景，从而不占用布局空间；有的是图片容器，它只能成为图片；有的是内容类型，它是可以是文字，也可以是图片，并且是可以重复出现的；通过盒子的类型与其他属性定义，就可以进行完整的标识设计图上的各种不可识别的元素了。

传统软件开发流程中，设计图后，需要前端开发人员将设计图手工一个一个的切图，并手写DIV与CSS，会占用开发周期中相当的时间；如果设计图修改，页面编码与切图需要重头再来；同时输出产物方面，不同人员输出质量不一样，规范难统一。

发明内容

本发明的一个目的是解决至少上述问题，并提供至少后面将说明的优点。

本发明还有一个目的是提供一种提高前端效率、减少工作量，提高复用度、减少重复工作，提高输出质量、减少差异的基于盒子模型的设计图自动转换成网页的方法。

为了实现根据本发明的这些目的和其它优点，提供了一种基于盒子模型的设计图自动转换成网页的方法，包括：

S1，将设计图进行语义化定义，使得设计图转化为盒子数据；

S2，将步骤S1得到盒子数据解析、转化成网页。

优选地，所述步骤S1具体包括：

S11，在设计图上定义布局盒子，画出布局区域A；

S12，判断A区块是否可以划分子区块：

若不能划分出子区块，则进入步骤S13；

若能划分出子区块，则重新进入步骤S11；

S13，判断布局区域A的内容类型：

B01：若布局区域A的内容类型对应网页基本元素时，绘制元素盒子得到相应的盒子数据，并按需输入其他自定义属性；

B02：若布局区域A的内容类型对应网页图片时，绘制图片盒子，并按需输入其他自定义属性；

B03：若布局区域A的内容类型对应网页背景时，绘制背景盒子，并按需输入其他自定义属性；

判断步骤B03绘制的背景盒子是否包含子区块：

若包含子区块，则重新进入步骤S11；

S14，保存上述步骤得到的设计图的所有的盒子数据，包括分析布局关系、布局盒子内部的子盒子关系、分析层级关系；

其中，所述布局盒子其将设计图的不同区块进行区分，不同区块的盒子均定义为布局盒子；布局盒子具有以下盒子属性：宽度、高度、横坐标、纵坐标、边框、边距，用来描述盒子的布局信息；不同的布局盒子，对应标记设计图的不同区块，对应生成网页的各个组成部分；将布局盒子内的具体内容定义为背景盒子或元素盒子；所述布局盒子不能重叠；

所述背景盒子用于标识设计图上的背景元素；背景盒子继承布局盒子的属性的同时，具有专有属性，所述专属属性包括背景色、背景图；背景盒子能包含布局盒子或元素盒子或包含上述两种盒子；

所述元素盒子用于标识设计图上的内容元素，其包括文字、图片、图标；元素盒子在继承背景盒子的同时，也具有其他属性，其包括字体、链接、对齐、内容填充，所述内容填充包括标题、段落、列表、表单，对应于网页的多种元素；所述元素盒子是终极盒子，不能装载任何盒子。

优选地，所述步骤S2具体包括：

S21，载入设计图及对应的盒子数据；

S22，判断步骤S21载入的盒子数据是否符合盒子模型的定义：

若符合，则进入步骤S23；

若不符合，则重新进入步骤S21；

S23，对通过步骤S22校验的盒子数据，进行解析，并形成盒子逻辑树；

S24，将盒子逻辑树都解析转换后，对所有数据进行合并；

S25，保存数据，得到步骤S21载入的设计图转化形成的网页。

优选地，所述步骤S24具体包括：

C01，在步骤S23得到的盒子逻辑树中，选择一布局盒子B，并将其解析转换；

C02，重复步骤C01直至盒子逻辑树全部被解析、转换。

优选地，所述步骤C01具体包括：

D01，布局盒子B，分析布局盒子B的属性，转换成页面布局代码与样式；

D02，分析布局盒子B包含的背景盒子，则解析背景盒子属性，转换成页面背景代码与样式；如果背景盒子包含下级盒子数据，则重新进入步骤C01流程；

D03，分析布局盒子B包含的元素盒子，则解析元素盒子属性，转换成页面元素代码与样式。

优选地，所述步骤S25具体包括：

E01，Html页面代码保存为html文件；

E02，Css样式表保存为css文件。

本发明至少包括以下有益效果：

1、提高前端效率，减少工作量；

前端开发人员只需在设计图上输入盒子数据；切图与网页代码输出自动完成；

2、提高复用度，减少重复工作；

盒子数据保存后可以复用，设计图变更后，只需要修改涉及的盒子数据，然后就可以生成变更后的结果；

3、提高输出质量，减少差异；

本发明一种基于盒子模型的设计图自动转换成网页的方法，开发人员只需要输入盒子数据，生成工作由服务器生成模块自动生成；避免了人为导致的差异，并且可以通过定制生成模块实现统一、个性化的输出方案。

本发明的其它优点、目标和特征将部分通过下面的说明体现，部分还将通过对本发明的研究和实践而为本领域的技术人员所理解。

附图说明

图1为本发明实施例1的设计图进行语义化定义的示意图；

图2为本发明实施例1的设计图转化为盒子数据的流程图；

图3为本发明实施例1的盒子数据转化成网页的流程图；

图4为本发明实施例2的设计图。

附图标记说明：□为A01、布局盒子，

为A02、背景盒子，

为A03、元素盒子，A04、高度，A05、宽度，A06、边距，A07、边框，A08、X轴，A09、Y轴，

具体实施方式

下面结合附图对本发明做进一步的详细说明，以令本领域技术人员参照说明书文字能够据以实施。

需要说明的是，下述实施方案中所述实验方法，如无特殊说明，均为常规方法，所述试剂和材料，如无特殊说明，均可从商业途径获得；在本发明的描述中，术语“横向”、“纵向”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，并不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。

如图1-4所示，本发明提供一种提高前端效率、减少工作量，提高复用度、减少重复工作，提高输出质量、减少差异的基于盒子模型的设计图自动转换成网页的方法。

S2，将步骤S1得到盒子数据解析、转化成网页。

在该种技术方案中，根据用户在设计图上输入盒子数据，得到盒子数据在设计图上的定位数据，然后根据盒子之间的排列，盒子内部之间的嵌套，形成盒子数据的层级关系、嵌套关系，根据这些盒子数据，完整描述了设计图上的内容，服务器生成模块根据盒子数据生成符合规范的Dom文档与CSS文档及图片数据；

传统软件开发流程中，先要设计图，然后需要前端开发人员将设计图手工一个一个的切图，并手写Html与CSS，用网页设计语言复原设计图，这个过程会占用开发周期中相当的时间；如果设计图修改，页面编码与切图需要重头再来；同时输出产物方面，不同人员输出代码质量不一样，规范难统一；

本发明通过对图片(网页设计图)进行语义化定义，生成计算机可以理解的中间语言(盒子数据)，然后由计算机算法自动理解并解析生成可直接使用的网页。

盒子模型原理解释：用盒子模型去对图像进行语义化定义，针对设计图上的不同元素，通过定义不同类型的盒子，对设计图进行语义化，方便计算机理解设计图，然后根据定义的盒子模型解析、转化成网页；

Html、Css技术标准：http://www.chinaw3c.org/standards.html

传统切图软件：photoshop、fireworks，切图与页面编码是分开进行的。在另一种技术方案中，所述步骤S1具体包括：

S11，在设计图上定义布局盒子，画出布局区域A；

S12，判断A区块是否可以划分子区块：

若不能划分出子区块，则进入步骤S13；

若能划分出子区块，则重新进入步骤S11；

S13，判断布局区域A的内容类型：

判断步骤B03绘制的背景盒子是否包含子区块：

若包含子区块，则重新进入步骤S11；

在该种技术方案中，网页页面在视觉上与设计图是一模一样的，所以要对设计图进行合适的语义化定义，需要结合网页的一些技术标准；

把网页看成一个大盒子，里面不同区块就可以理解成子盒子，具体内容就可以理解成元素盒子，盒子组装到一起就是完整的网页。

不同区块的盒子我们定义为布局盒子，用来区分不同区块，对应标记设计图的不同区块，对应生成网页的各个组成部分；布局盒子理论上是不能重叠的；

每个布局盒子里面装着具体的内容，内容部分定义为背景盒子与元素盒子；背景盒子用来描述背景效果，背景盒子可以包含其他盒子(布局、元素)；元素盒子貌似设计图上具体元素，对应网页的标签元素、表单元素等。元素盒子是终极盒子，它不能装载其他任意盒子。

在另一种技术方案中，所述步骤S2具体包括：

S21，载入设计图及对应的盒子数据；

S22，判断步骤S21载入的盒子数据是否符合盒子模型的定义：

若符合，则进入步骤S23；

若不符合，则重新进入步骤S21；

S24，将盒子逻辑树都解析转换后，对所有数据进行合并；

S25，保存数据，得到步骤S21载入的设计图转化形成的网页。

在另一种技术方案中，所述步骤S24具体包括：

C02，重复步骤C01直至盒子逻辑树全部被解析、转换。

在另一种技术方案中，所述步骤C01具体包括：

在另一种技术方案中，所述步骤S25具体包括：

E01，Html页面代码保存为html文件；

E02，Css样式表保存为css文件。

实施例1

如图1：

A01：布局盒子：标识设计图上的区块(头部、正文、尾部等)，对应网页的响应区块；布局盒子具有各种盒子属性，如宽度(A05)、高度(A04)、X坐标(A08)、纵坐标(A09)、边框(A07)、边距(A06)等，可以用来描述盒子的布局信息；

A02：背景盒子：标识设计图上的背景元素；背景盒子继承布局盒子的属性的同时，具有专有属性，如背景色、背景图等；

A03：元素盒子：标识设计图上的内容元素(文字、图片、图标等)；元素盒子在继承背景盒子的同时，它有其他一些属性，如果字体、链接、对齐等，以及独特的内容填充，比如标题、段落、列表、表单等，对应于网页的多种元素；

通过上述盒子模型语义化定义，就可以用盒子模型来详细描述设计图了；

用盒子模型在设计图上语义化数据过程：

如图2，是一个推荐的语义化流程：

G01：首先载入设计图；

G02：在设计图上定义布局盒子，画出一个布局区块A；

G03：判断A区块是否可以划分多个子区块；判断标准是：区块A里面是否有多个独立的内容，比如一个头部区块：包含logo元素、banner元素、栏目menu元素；这些不同元素就可以放在不同的布局盒子；

G05：如果条件成立，就可以在A区块里面继续划分布局区块，进入G02流程；

G04：如果条件不成立，就可以判断内容类型，确定需要的内容盒子；

G06：内容类型对应网页基本元素时：绘制元素盒子G09；

G07：内容类型对应网页图片时：绘制图片盒子G10；

G08：内容类型对应网页背景时：绘制背景盒子G11；

G12：背景盒子G11，需要判断是否包含子内容。需要回到G03流程；

G13：元素盒子G09、图片盒子G10、背景盒子G11，按需输入其他自定义属性：字体、边框、链接、内容等；

G14：保存设计图盒子语义化数据；

上述流程描述了一个区块，从布局盒子到背景盒子到元素盒子的完整流程；

在对设计图的实际定义过程中，上述流程会有并行或者嵌套操作；从而完整的描述设计图的所有区块与元素；

盒子数据转化成网页过程:

如图3，是一个推荐的盒子数据解析转换流程：

H01：载入设计图；

H02：选择载入设计图对应的盒子数据(由上述语义化过程生成)；

H03：Checking，校验载入的盒子数据的合法性、完整性；盒子数据内容格式不符合盒子模型定义的，走H05流程，返回重新选择载入盒子数据；

H04：通过校验的数据进入Parsing流程，这里对数据进行解析，分析布局关系、布局盒子内部的子盒子关系、分析层级关系(同级、父子等)，形成盒子逻辑树；

H06：从上述逻辑树中选中一个布局盒子B，分析布局盒子B的属性，转换成页面布局代码与样式；

H07：布局盒子B，分析布局盒子B的属性，转换成页面布局代码与样式；布局网页代码对应html的div标签；根据布局盒子的基本属性：坐标(X、Y)、盒子的高宽、边距、边框等，生成对应的Css样式；其中同级的布局盒子通常是通过相对位置进行布局，后一个布局盒子相对前一个的盒子的位置，而不是绝对的坐标位置。布局盒子生成的div的高度可以有最小值，但不限制其为绝对高度，方便其随着内容的填充而自动往下扩展高度。

H08：分析布局盒子B包含的背景盒子，解析背景盒子属性，转换成页面背景代码与样式；背景盒子拥有图片背景属性的，生成响应的背景图片在设计图上的截取坐标；如果背景盒子包含下级盒子数据，则走H13流程进入循环流程；

H09：分析布局盒子B包含的元素盒子，解析元素盒子属性，转换成页面元素代码与样式；元素盒子拥有的扩展属性是最多的，这里需要根据其扩展属性进行内容转换。比如元素盒子对应设计图上的是一个表单输入框，该元素盒子是扩展属性是input表单，则应转换为input表单代码，同时生成该表单的Css样式代码。如果是图片元素，还需要生成元素图片在设计图上的截取坐标；

H07、H08、H09与H10、H11、H12一样的流程，解析的是逻辑树中的另外一个布局盒子，其他类推；

H14：将盒子逻辑树都解析转换后，对所有数据进行合并；包括页面代码数据，样式表数据；图片待截取数据等；

H15：保持文档；Html页面代码保存为html文件；Css样式表保存为css文件；根据图片待截取数据，在设计图上进行截取，保存为图片文件；在保存文档时，涉及对html代码进行优化，去掉多余的无用代码。Css文件涉及把生成的样式与基础样式进行合并。基础样式是通用的样式代码，生成的样式代码基于基础样式，调高生成样式的抽象度。图片的保存涉及根据图片截取坐标图片，如果是小图片、小图标可以进行合并，以减少图片数量与大小；

上述根据盒子模型原理，对设计图进行语义化描述的过程，以及转换生成网页的过程，构成了本发明的技术方法和实现装置。

实施例2

第一步、进行初始化工作解析：要用本发明的盒子模型理论对设计图进行语义化标注。其中比较重要的是需要开发配套的标注工具，来对设计图进行可视化的标记，工具需要比较智能，要能体现本发明的盒子模型理论，要能解决标注中的一些布局盒子、元素盒子之间碰撞、交叉、部分重叠等情况的效果显示；辅助开发人员进行可视化的拖拽操作，从而让使用者不用关注盒子模型的一些理论细节。如何用其他编程语言实现盒子模型理论的工具，不在本发明的讨论范围内。这里简述用编程语言实现一个简单工具的基本思路：采用c语言开发一个基于画板的标注工具，工具可以将设计图载入画板，同时利用鼠标事件在画板上绘画矩形框，对应本发明盒子理论的盒子。绘画矩形框的同时，记录矩形框的坐标、边框等信息。以便处理多个矩形框之间的碰撞、部分覆盖的显示效果。如此，加入盒子理想需要的其他扩展信息标注，这个工具便可以使用了。

第二步、进行语义化过程解析：有了上述实现了盒子理论的标注工具，语义化过程就非常简单了。首先在工具里载入设计图。如图4，这里为了简化操作步骤，只演示加载一个网页头部的设计图(D01)。通过分析该设计图(D01)，可以发现它包括两个部分：网站logo图标(D02)、网站栏目menu(D03)；所以先拖拽一个布局盒子(D01)包含所有内容。网站logo图标(D02)可以显示为背景图标，所以在布局盒子里面拖拽一个背景盒子(D02)，扩展属性设置为图片背景；网站栏目menu(D03)里面有多个栏目，是个列表；所以这里拖拽一个布局盒子(D03)，它里面的具体栏目就是元素盒子，这里需要拖拽两个盒子D04、D05，可以发现，这个两个元素是有区别的，显示样式不一样。针对D04需要设置扩展属性为文本内容，并且设置字体、链接地址等；针对D05需要设置扩展属性为文本内容，设置颜色、字体、链接地址等；针对设计图上的文本内容、颜色等是可以通过加强工具的识别能力智能识别的，通过工具扩展可以进一步提高效率。标注完成后，就是保存标注后的盒子数据了。

第三步、转换生成网页解析：根据上一步生成的盒子数据，如何解析生成网页，需要用编程语言实现前面的转换流程图C的转换逻辑算法。这个算法体现转换能力、转换效果。这里简述根据转化流程图用C语言实现转换核心算法的思路，首先实现对设计图、盒子数据的加载，加载到内存空间备用。然后实现Checking函数，对内存里面的盒子数据进行格式校验、内容参数校验，判断是否符合上述的盒子模型理论(盒子的类型、属性定义、扩展属性等),Checking函数的作用是对盒子数据进行基础校验。其次实现Parsing函数，Parsing函数对盒子数据进行数据加工处理，根据盒子的包含、继承关系，生成盒子逻辑树；同时对盒子的属性数据进行加工，方便后面的生成计算。最后就是实现转换生成函数。这个函数算法上是一个递归函数，可以对逻辑数据进行循环递归操作。转换生成函数的实现重点是根据布局盒子的属性生成布局Html代码与Css布局样式，需要用到盒子的坐标、高宽等数据，D01就是布局元素，生成布局代码重点是位置信息，头部D01与浏览器的边框接触，采用相对坐标定位；内容是固定内容，所以内容是绝对高度。根据背景盒子的属性，生成背景元素的Html代码与Css背景样式，如果是图片背景元素的，需要截取生成相应的图片。根据元素盒子的属性，生成元素内容的Html代码与Css样式,其中D05元素是可以扩展数量的，根据它的数量属性生成包含多个栏目的代码。最后运行转换生成函数，将生成的结构保存到本地文件夹，网页代码保存为Html文件，样式保存为Css文件，图片数据截取后单独存放图片文件夹。

在实施例2的上述步骤中，采用的是C语言，优选地是把开发语言改成Java或者python，用java或python还可以复用许多开源的组件库，例如图片识别、解析等开源库。

其中，图1-4中的效果图就是设计图。

尽管本发明的实施方案已公开如上，但其并不仅仅限于说明书和实施方式中所列运用，它完全可以被适用于各种适合本发明的领域，对于熟悉本领域的人员而言，可容易地实现另外的修改，因此在不背离权利要求及等同范围所限定的一般概念下，本发明并不限于特定的细节和这里示出与描述的图例。

Claims

1.一种基于盒子模型的设计图自动转换成网页的方法，其特征在于，包括：

S2，将步骤S1得到盒子数据解析和转化成网页；

所述步骤S1具体包括：

S11，在设计图上定义布局盒子，画出布局区域A；

S12，判断A区块是否可以划分子区块：

若不能划分出子区块，则进入步骤S13；

若能划分出子区块，则重新进入步骤S11；

S13，判断布局区域A的内容类型：

判断步骤B03绘制的背景盒子是否包含子区块：

若包含子区块，则重新进入步骤S11；

其中，所述布局盒子其将设计图的不同区块进行区分，不同区块的盒子均定义为布局盒子；布局盒子具有以下盒子属性：宽度、高度、横坐标、纵坐标、边框和边距，用来描述盒子的布局信息；不同的布局盒子，对应标记设计图的不同区块，对应生成网页的各个组成部分；将布局盒子内的具体内容定义为背景盒子或元素盒子；所述布局盒子不能重叠；

所述背景盒子用于标识设计图上的背景元素；背景盒子继承布局盒子的属性的同时，具有专有属性，所述专有属性包括背景色和背景图；背景盒子能包含布局盒子或元素盒子或包含上述两种盒子；

所述元素盒子用于标识设计图上的内容元素，其包括文字、图片和图标；元素盒子在继承背景盒子的同时，也具有其他属性，其包括字体、链接、对齐和内容填充，所述内容填充包括标题、段落、列表和表单，对应于网页的多种元素；所述元素盒子是终极盒子，不能装载任何盒子。

2.如权利要求1所述的一种基于盒子模型的设计图自动转换成网页的方法，其特征在于，所述步骤S2具体包括：

S21，载入设计图及对应的盒子数据；

S22，判断步骤S21载入的盒子数据是否符合盒子模型的定义：

若符合，则进入步骤S23；

若不符合，则重新进入步骤S21；

S24，将盒子逻辑树都解析转换后，对所有数据进行合并；

S25，保存数据，得到步骤S21载入的设计图转化形成的网页。

3.如权利要求2所述的一种基于盒子模型的设计图自动转换成网页的方法，其特征在于，所述步骤S24具体包括：

C02，重复步骤C01直至盒子逻辑树全部被解析和转换。

4.如权利要求3所述的一种基于盒子模型的设计图自动转换成网页的方法，其特征在于，所述步骤C01具体包括：

5.如权利要求2所述的一种基于盒子模型的设计图自动转换成网页的方法，其特征在于，所述步骤S25具体包括：

E01，Html页面代码保存为html文件；

E02，Css样式表保存为css文件。