[發明專利]Canvas代碼生成方法、裝置、電子設備及存儲介質

有效

• 申請號: 201710504347.3
• 申請日: 2017-06-27
• 公開（公告）號: CN107291476B
• 公開（公告）日: 2020-12-08
• 發明（設計）人: 謝楊玲
• 申請（專利權）人: 北京微影時代科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/41
• 代理公司: 北京市廣友專利事務所有限責任公司 11237
• 代理人: 祁獻民

本發明公開了一種Canvas代碼生成方法，包括：獲取用于生成代碼的可縮放矢量圖形SVG文件；基于SVG文件中各元素的標簽名稱、標簽類型和屬性信息，生成包含各元素及各元素層級關系的JSON格式的中間數據；按照各元素層級關系中從外到內及從前到后的順序，遍歷中間數據，確定與每個元素的屬性信息對應的Canvas代碼單元；將確定的Canvas代碼單元，按照順序進行組合，得到SVG文件對應的Canvas代碼。從而實現了自動化生成Canvas代碼，提高了Canvas代碼的生成效率。

技術領域

本發明涉及互聯網技術領域中的Canvas(畫布)技術領域，尤其涉及一種Canvas代碼生成方法、裝置、電子設備及存儲介質。

背景技術

在互聯網技術應用中，經常需要在呈現給用戶的界面中，展示一些圖形。為實現這一目的，UI設計師提供用戶界面原型設計圖，前端工程師負責將原型設計圖轉化為代碼，從而還原設計。

前端工程師在轉化代碼時，可以采用網頁畫布技術，即HTML5(Hyper Text MarkupLanguage，超文本標記語言)支持的Canvas技術。在使用時，可以用瀏覽器支持的腳本語言Java script調用Canvas API(Application Programming Interface，應用程序編程接口)，作為前端工程師還原設計的一種代碼手段。

在目前的方法中，如果使用Canvas繪制設計圖，前端工程師需要自己根據圖形形狀來確定調用的Canvas API，并手寫代碼，使得代碼生成的效率較低。

發明內容

本發明實施例提供一種Canvas代碼生成方法、裝置、電子設備及存儲介質，用以解決現有技術中存在的Canvas代碼生成效率較低的問題。

本發明實施例提供一種Canvas代碼生成方法，包括：

獲取用于生成代碼的可縮放矢量圖形SVG文件；

基于所述SVG文件中各元素的標簽名稱、標簽類型和屬性信息，生成包含所述各元素及所述各元素層級關系的JSON格式的中間數據；

按照所述各元素層級關系中從外到內及從前到后的順序，遍歷所述中間數據，確定與每個元素的屬性信息對應的Canvas代碼單元；

將確定的Canvas代碼單元，按照順序進行組合，得到所述SVG文件對應的Canvas代碼。

進一步的，基于所述SVG文件中各元素的標簽名稱、標簽類型和屬性信息，生成包含所述各元素及所述各元素層級關系的JSON格式的中間數據，包括：

基于所述SVG文件中各元素的標簽名稱、標簽類型和屬性信息，生成與所述各元素分別一一對應的詞法單元，所述詞法單元包括對應元素的標簽名稱、標簽類型和屬性信息；

按照從前到后的順序遍歷各詞法單元，并根據詞法單元中的標簽類型為開始類型或結束類型，確定先后相鄰兩個詞法單元之間的層級關系，得到包含所述各元素及所述各元素層級關系的JSON格式的中間數據。

進一步的，基于所述SVG文件中各元素的標簽名稱、標簽類型和屬性信息，生成與所述各元素分別一一對應的詞法單元，包括：

按照已知的SVG文件結構，對所述SVG文件進行文本分割，得到所述SVG文件中各元素所包括的文本內容；

采用文本匹配技術，分別從所述各元素包括的文本內容中，解析出所述各元素的標簽名稱、標簽類型和屬性信息；

針對所述各元素中的每個元素，生成與該元素對應的包括該元素的標簽名稱、標簽類型和屬性信息的詞法單元。

進一步的，在確定與每個元素的屬性信息對應的Canvas代碼單元之后，還包括：