[發(fā)明專利]一種基于盒子模型的設計圖自動轉(zhuǎn)換成網(wǎng)頁的方法

有效

• 申請?zhí)枺?/td>: 201811292730.8
• 申請日: 2018-11-01
• 公開（公告）號: CN109656552B
• 公開（公告）日: 2022-02-15
• 發(fā)明（設計）人: 劉杰;張愛平
• 申請（專利權(quán)）人: 中交第二航務工程局有限公司;武漢航科物流有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/34;G06T11/60
• 代理公司: 北京遠大卓悅知識產(chǎn)權(quán)代理有限公司 11369
• 代理人: 王瑩

1.一種基于盒子模型的設計圖自動轉(zhuǎn)換成網(wǎng)頁的方法，其特征在于，包括：

S1，將設計圖進行語義化定義，使得設計圖轉(zhuǎn)化為盒子數(shù)據(jù)；

S2，將步驟S1得到盒子數(shù)據(jù)解析和轉(zhuǎn)化成網(wǎng)頁；

所述步驟S1具體包括：

S11，在設計圖上定義布局盒子，畫出布局區(qū)域A；

S12，判斷A區(qū)塊是否可以劃分子區(qū)塊：

若不能劃分出子區(qū)塊，則進入步驟S13；

若能劃分出子區(qū)塊，則重新進入步驟S11；

S13，判斷布局區(qū)域A的內(nèi)容類型：

B01：若布局區(qū)域A的內(nèi)容類型對應網(wǎng)頁基本元素時，繪制元素盒子得到相應的盒子數(shù)據(jù)，并按需輸入其他自定義屬性；

B02：若布局區(qū)域A的內(nèi)容類型對應網(wǎng)頁圖片時，繪制圖片盒子，并按需輸入其他自定義屬性；

B03：若布局區(qū)域A的內(nèi)容類型對應網(wǎng)頁背景時，繪制背景盒子，并按需輸入其他自定義屬性；

判斷步驟B03繪制的背景盒子是否包含子區(qū)塊：

若包含子區(qū)塊，則重新進入步驟S11；

S14，保存上述步驟得到的設計圖的所有的盒子數(shù)據(jù)，包括分析布局關(guān)系、布局盒子內(nèi)部的子盒子關(guān)系、分析層級關(guān)系；

其中，所述布局盒子其將設計圖的不同區(qū)塊進行區(qū)分，不同區(qū)塊的盒子均定義為布局盒子；布局盒子具有以下盒子屬性：寬度、高度、橫坐標、縱坐標、邊框和邊距，用來描述盒子的布局信息；不同的布局盒子，對應標記設計圖的不同區(qū)塊，對應生成網(wǎng)頁的各個組成部分；將布局盒子內(nèi)的具體內(nèi)容定義為背景盒子或元素盒子；所述布局盒子不能重疊；

所述背景盒子用于標識設計圖上的背景元素；背景盒子繼承布局盒子的屬性的同時，具有專有屬性，所述專有屬性包括背景色和背景圖；背景盒子能包含布局盒子或元素盒子或包含上述兩種盒子；

所述元素盒子用于標識設計圖上的內(nèi)容元素，其包括文字、圖片和圖標；元素盒子在繼承背景盒子的同時，也具有其他屬性，其包括字體、鏈接、對齊和內(nèi)容填充，所述內(nèi)容填充包括標題、段落、列表和表單，對應于網(wǎng)頁的多種元素；所述元素盒子是終極盒子，不能裝載任何盒子。

2.如權(quán)利要求1所述的一種基于盒子模型的設計圖自動轉(zhuǎn)換成網(wǎng)頁的方法，其特征在于，所述步驟S2具體包括：

S21，載入設計圖及對應的盒子數(shù)據(jù)；

S22，判斷步驟S21載入的盒子數(shù)據(jù)是否符合盒子模型的定義：

若符合，則進入步驟S23；

若不符合，則重新進入步驟S21；

S23，對通過步驟S22校驗的盒子數(shù)據(jù)，進行解析，并形成盒子邏輯樹；

S24，將盒子邏輯樹都解析轉(zhuǎn)換后，對所有數(shù)據(jù)進行合并；

S25，保存數(shù)據(jù)，得到步驟S21載入的設計圖轉(zhuǎn)化形成的網(wǎng)頁。

3.如權(quán)利要求2所述的一種基于盒子模型的設計圖自動轉(zhuǎn)換成網(wǎng)頁的方法，其特征在于，所述步驟S24具體包括：

C01，在步驟S23得到的盒子邏輯樹中，選擇一布局盒子B，并將其解析轉(zhuǎn)換；

C02，重復步驟C01直至盒子邏輯樹全部被解析和轉(zhuǎn)換。

4.如權(quán)利要求3所述的一種基于盒子模型的設計圖自動轉(zhuǎn)換成網(wǎng)頁的方法，其特征在于，所述步驟C01具體包括：

D01，布局盒子B，分析布局盒子B的屬性，轉(zhuǎn)換成頁面布局代碼與樣式；

D02，分析布局盒子B包含的背景盒子，則解析背景盒子屬性，轉(zhuǎn)換成頁面背景代碼與樣式；如果背景盒子包含下級盒子數(shù)據(jù)，則重新進入步驟C01流程；

D03，分析布局盒子B包含的元素盒子，則解析元素盒子屬性，轉(zhuǎn)換成頁面元素代碼與樣式。

5.如權(quán)利要求2所述的一種基于盒子模型的設計圖自動轉(zhuǎn)換成網(wǎng)頁的方法，其特征在于，所述步驟S25具體包括：

E01，Html頁面代碼保存為html文件；

E02，Css樣式表保存為css文件。