[發明專利]基于界面設計圖自動生成界面代碼的方法、裝置、介質及電子設備

在審

• 申請號: 201911342703.1
• 申請日: 2019-12-23
• 公開（公告）號: CN111190595A
• 公開（公告）日: 2020-05-22
• 發明（設計）人: 譚龍智
• 申請（專利權）人: 平安國際智慧城市科技股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/451
• 代理公司: 深圳市隆天聯鼎知識產權代理有限公司 44232
• 代理人: 孫強

1.一種基于界面設計圖自動生成界面代碼的方法，其特征在于，包括：

獲取界面設計圖；

識別所述界面設計圖的界面元素的位置；

根據識別的界面元素的位置，查找界面元素位置與代碼模板對應關系表，獲得與所述界面元素的位置對應的代碼模板，所述代碼模板中含有所述位置的界面元素的界面的通用代碼，其中界面元素的參數在代碼模板中未填寫；

提取所述界面元素的參數；

響應于接收到用于風格轉化的請求指令，所述請求指令中攜帶有需要的風格信息；

根據所述需要的風格信息，查找風格信息與參數改變量匹配關系表，以確定參數改變量，以便將所述參數改變量施加在所述界面元素的參數上；

將改變后的界面元素的參數填充到所述代碼模板中所述參數的對應位置，生成對應于所述風格信息的界面代碼。

2.根據權利要求1所述的方法，其特征在于，所述獲取界面設計圖，包括：

接收到待處理界面設計圖，并將所述待處理界面設計圖轉換成灰度圖像；

對所述灰度圖像進行平滑處理，將所述經平滑處理后的灰度圖像進行中值濾波處理；

將所述中值濾波處理后的灰度圖像進行二值化處理，得到二值圖像，作為獲取到的界面設計圖。

3.根據權利要求2所述的方法，其特征在于，所述識別所述界面設計圖的界面元素的位置，包括：

識別所述二值圖像中的邊緣曲線，其中，如果二值圖像中相鄰兩個像素點的像素值相同，則用線連接所述相鄰兩個像素點，用線連接二值圖像上所有相鄰的像素值相同的像素點后形成的每一條連通曲線為一條邊緣曲線；

將所述邊緣曲線輸入至識別界面元素的機器學習模型，由機器學習模型輸出所述界面元素；

獲取所述連通曲線的每個像素點的位置坐標；

基于所述連通曲線的每個像素點的位置坐標，確定所述連通中心的坐標，作為對應界面元素的位置。

4.根據權利要求3所述的方法，其特征在于，所述機器學習模型通過以下方式預先訓練而成：

獲取邊緣曲線樣本集合，所述邊緣曲線樣本中的每個邊緣曲線樣本具有貼好的界面元素標簽；

將所述邊緣曲線樣本中的每個邊緣曲線樣本輸入機器學習模型，由所述機器學習模型輸出判定的界面元素名稱，將判定的界面元素名稱與貼好的界面元素標簽對應，如不一致，則調整所述機器學習模型的系數，使得判定的界面元素名稱與貼好的界面元素標簽對應。

5.根據權利要求1所述的方法，其特征在于，所述將改變后的界面元素的參數填充到所述代碼模板中所述參數的對應位置，生成對應于所述風格信息的界面代碼，包括：

逐一標記各所述改變后的界面元素的參數，各所述標記依序排列；

依照順序檢測所述代碼模板所空缺的位置，將所述所空缺的位置與所述標記進行匹配；

若匹配成功，則將所述標記對應的參數與對應的所述所空缺的位置進行關聯，且將所述標記對應的參數填充至對應的所述所空缺的位置，以生成對應于所述風格信息的界面代碼。

6.一種基于界面設計圖自動生成界面代碼的裝置，其特征在于，包括：

獲取模塊，用于獲取界面設計圖；

識別模塊，用于識別所述界面設計圖的界面元素的位置；

第一查找模塊，用于根據識別的界面元素的位置，查找界面元素位置與代碼模板對應關系表，獲得與所述界面元素的位置對應的代碼模板，所述代碼模板中含有所述位置的界面元素的界面的通用代碼，其中界面元素的參數在代碼模板中未填寫；

提取模塊，用于提取所述界面元素的參數；

響應模塊，用于響應于接收到用于風格轉化的請求指令，所述請求指令中攜帶有需要的風格信息；

第二查找模塊，用于根據所述需要的風格信息，查找風格信息與參數改變量匹配關系表，以確定參數改變量，以便將所述參數改變量施加在所述界面元素的參數上；

填充模塊，用于將改變后的界面元素的參數填充到所述代碼模板中所述參數的對應位置，生成對應于所述風格信息的界面代碼。