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

有效

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

1.基于canvas的圖片交錯平鋪方法，其特征在于，包括：

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

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

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

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

所述在所述Canvas DOM中繪制所述平鋪圖像，包括：

參照所述是否橫向交錯的標識和是否縱向交錯的標識，計算當前遍歷到的對應第一層第x個，第二層第y個位置的平鋪圖像對應所述Canvas DOM的偏移量；

調用所述Canvas DOM的2D圖像繪制工具集，以所述偏移量、平鋪圖像及其寬高為參數，將所述平鋪圖像繪制到所述Canvas DOM中的對應位置；

繼續遍歷，直至嵌套循環操作結束。

2.如權利要求1所述的基于canvas的圖片交錯平鋪方法，其特征在于，還包括：

將所述Canvas DOM中繪制的內容以圖片格式進行存儲；

新建一Image DOM，并設置其路徑為所述存儲的路徑；

將所述Image DOM掛載到DOM樹中。

3.如權利要求1所述的基于canvas的圖片交錯平鋪方法，其特征在于，所述標識為1則對應是；所述標識為0則對應否。

4.如權利要求3所述的基于canvas的圖片交錯平鋪方法，其特征在于，設當前遍歷到的位置為(x_index，y_index)；所述是否橫向交錯的標識為horStagger；所述是否縱向交錯的標識為verStagger；所述平鋪圖像的寬高為image_width和image_height；

則所述參照所述是否橫向交錯的標識和是否縱向交錯的標識，計算當前遍歷到的對應第一層第x個，第二層第y個位置的平鋪圖像對應所述Canvas DOM的偏移量，包括：

依據公式：

x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2，以及

y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2，計算得到當前遍歷到的位置的平鋪圖像對應所述Canvas DOM的偏移量。

5.一種計算機可讀存儲介質，其上存儲有計算機程序，其特征在于，所述程序在被處理器執行時，能夠實現上述權利要求1-4任意一項所述的基于canvas的圖片交錯平鋪方法所包含的步驟。