[發明專利]一種基于盒子模型的設計圖自動轉換成網頁的方法

有效

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

本發明公開了一種基于盒子模型的設計圖自動轉換成網頁的方法，包括：S1，將設計圖進行語義化定義，使得設計圖轉化為盒子數據；S2，將步驟S1得到盒子數據解析、轉化成網頁。本發明通過對設計圖進行語義化定義，生成計算機可以理解的中間語言，也就是盒子數據，然后由計算機算法自動理解設計圖的盒子數據并解析生成可直接使用的網頁。本發明具有提高前端效率、減少工作量，提高復用度、減少重復工作，提高輸出質量、減少差異等優點，可廣泛應用于設計圖轉化成網頁的方法技術領域。

技術領域

本發明涉及設計圖轉化成網頁的方法技術領域。更具體地說，本發明涉及一種基于盒子模型的設計圖自動轉換成網頁的方法。

背景技術

在軟件開發領域中，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；