[發明專利]基于CANVAS的圖片交錯平鋪方法、存儲介質

有效

• 申請號: 202010811951.2
• 申請日: 2020-08-13
• 公開（公告）號: CN112100538B
• 公開（公告）日: 2022-04-12
• 發明（設計）人: 劉德建;陳銘;陳耀燦;郭玉湖;陳宏
• 申請（專利權）人: 福建天泉教育科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 福州市博深專利事務所(普通合伙) 35214
• 代理人: 張明

本發明提供基于canvas的圖片交錯平鋪方法、存儲介質，方法包括：分別設置是否橫向交錯的標識和是否縱向交錯的標識；新建一Canvas DOM，并設置其寬高為圖像的寬高；依據圖像的寬高和平鋪圖像的寬高，計算得到橫向平鋪數量和縱向平鋪數量；以所述橫向平鋪數量為第一層，所述縱向平鋪數量為第二層，參照所述是否橫向交錯的標識和是否縱向交錯的標識，以平鋪圖像及其寬高為參數，調用所述Canvas DOM的2D圖像繪制工具集執行嵌套循環操作，在所述Canvas DOM中繪制所述平鋪圖像。

技術領域

本發明涉及圖片繪制領域，具體涉及基于canvas的圖片交錯平鋪方法、存儲介質。

背景技術

很多和圖像有關的在線產品，例如在線圖片編輯器、在線產個性Logo定制等，在很多情況下都有提供圖片交錯平鋪功能的需求。圖片交錯平鋪效果如圖1(縱向交錯平鋪)和圖2(橫向交錯平鋪)所示。

現有的平鋪方案，是將一個原圖的Image DOM，根據平鋪尺寸克隆出長*寬的個數的Image DOM，對照圖1，就是克隆出5*7＝35個Image Dom來實現。這種實現方法由于存在大量的Image Dom，將導致瀏覽器的渲染性能非常低下，數量多的時候，將大概率出現用戶無法操作的卡頓或無響應情況。

因此，有需求提供全新的圖片交錯平鋪方法以解決上述問題。

發明內容

本發明所要解決的技術問題是：提供基于canvas的圖片交錯平鋪方法、存儲介質，能夠提高圖片交錯平鋪效率，同時優化系統性能，提升用戶體驗。

為了解決上述技術問題，本發明采用的技術方案為：

基于canvas的圖片交錯平鋪方法，包括：

分別設置是否橫向交錯的標識和是否縱向交錯的標識；

新建一Canvas DOM，并設置其寬高為圖像的寬高；

依據圖像的寬高和平鋪圖像的寬高，計算得到橫向平鋪數量和縱向平鋪數量；

以所述橫向平鋪數量為第一層，所述縱向平鋪數量為第二層，參照所述是否橫向交錯的標識和是否縱向交錯的標識，以平鋪圖像及其寬高為參數，調用所述Canvas DOM的2D圖像繪制工具集執行嵌套循環操作，在所述Canvas DOM中繪制所述平鋪圖像。

本發明提供的另一個技術方案為：

一種計算機可讀存儲介質，其上存儲有計算機程序，所述程序在被處理器執行時，能夠實現上述基于canvas的圖片交錯平鋪方法所包含的步驟。

本發明的有益效果在于：本發明利用Canvas提供繪制2D圖形圖像的特點，將多個交叉排列的平鋪圖像，依序繪制到一個Canvas DOM中，并且無需創建多個Image DOM，進而解決了過多DOM導致瀏覽器渲染性能低下的問題，特別是內存和CPU利用率上的優化，能夠使得系統性能得到大大優化，同時也優化了用戶體驗；進一步地，由于平鋪過程全自動執行，且有效避免了卡頓問題，因此還能顯著提高平鋪效率；再進一步的，還支持靈活設定平鋪圖像的交錯方式，實現自定義平鋪效果，更符合實際使用的需求，實用性更強。

附圖說明

圖1為一縱向交錯平鋪效果示意圖；

圖2為一橫向交錯平鋪效果示意圖；

圖3為本發明一實施例一種基于canvas的圖片交錯平鋪方法的流程示意圖；

圖4為本發明實施例一的一種基于canvas的圖片交錯平鋪方法的流程示意圖；

圖5為本發明實施例三中源圖像的Image DOM的示意圖；

圖6為本發明實施例三中嵌套循環過程遍歷到的第一個位置的定位效果圖；