小程序Canvas繪圖不同尺寸設備UI兼容的方法

本篇內容主要講解“小程序Canvas繪圖不同尺寸設備UI兼容的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“小程序Canvas繪圖不同尺寸設備UI兼容的方法”吧!

類 rem

等比例縮放單位的解決方案，也就是以一個尺寸為基準，例如 iphone 6，然后其他設備按照這個標準，在保證寬度鋪滿設備的前提下，進行等比例縮放

繪制的代碼很簡單：

const ctx = wx.createCanvasContext('shareCard')
ctx.drawImage('../58a.png', this.remSize(85), this.remSize(100), this.remSize(205), this.remSize(250))
ctx.setFontSize(this.remSize(16))
ctx.setFillStyle('yellowgreen')
ctx.fillText('flexible canvas', this.remSize(100), this.remSize(130))
ctx.draw()
復制代碼

其中，remSize 這個方法就是用于等比例縮放尺寸

remSize (num) {
  return num * scale
}
復制代碼

其中，scale就是當前設備與設計基準設備 iphone6的寬度比例

scale = wx.getSystemInfoSync().windowWidth / 375
復制代碼

當前是以鋪滿設備寬度為目標，所以高度不關心，即 以寬度為參考，高度 auto

以上，就基本實現需求，做法很簡單，這是通常一貫的解決方案 由于示例的需求比較簡單，所以看著沒多大問題，很完美，但是如果實際需求，比較復雜的那種，就有點不太美好了 哪里不美好呢？就是換算尺寸的時候，每個尺寸都要調用一遍 remSize方法，稍微復雜點需求可能就有幾十個需要換算的尺寸了，那就要寫幾十遍的 remSize，當然，寫是可以寫的，只是總感覺哪里不太對勁

圖片代替

這個方法不需要頻繁的尺寸換算，最后統一整體換算即可，原理也很簡單

• 按照 iphone6尺寸進行繪制

首先，無論當前設備的尺寸是什么，都不用管，先認為當前設備就是 iphone6，然后創建 canvas，在上面進行繪圖，只不過，不能讓用戶看到這個 canvas，因為當前設備并不一定是 iphone6，而你直接就認定是 iphone6，并以 iphone6的尺寸進行繪制，繪制出來的效果肯定跟設計的效果不一樣，所以不能讓用戶看到，可以使用 ccover-view組件覆蓋掉 canvas組件

Note: 如果想要通過給 canvas設置例如 opacity: 0, visibility: hidden等樣式進行隱藏，根據實測，在大部分的手機上其實無法生效，也就是依舊能看到，display: none;則是徹底將 canvas從文檔流中(如果也算是文檔流的話)刪掉，無法進行繪制，所以比較好的做法就是用一個 cover-view進行覆蓋

• 將繪制好的 canvas輸出為 圖片

canvas繪制好后，將其繪制成圖片保存在本地臨時存儲中，可以拿到這個圖片在本地的臨時路徑，然后將這張圖片放到頁面上，并給這張圖片設置尺寸樣式，圖片的寬度等于設備的寬度，高度跟隨寬度進行等比例縮放，最終讓用戶看到的就是這張圖片，因為進行了等比例縮放，所以視覺效果就是和設計圖上是一樣的

這里也有幾個點需要注意下

• ctx.draw是異步操作

一直以為這個方法是同步方法，所以調用完此方法后立即輸出圖片，就出現了有時候圖片錯誤的情況，后來才發現這個是異步操作，這就是看文檔不仔細的后果

ctx.draw(false, () => {
  // 保存為本地臨時文件
  this.saveImageToLocal()
})
復制代碼

• 繪制 canvas階段，要允許頁面橫向溢出

由于一開始繪制 canvas是按照iphone6的標準進行的，所以在有些寬度小于 iphone6的設備上，canvas的寬度是可能會比設備的寬度要大的(如果你繪制的是整屏 canvas)，但是小程序頁面的根元素 page，默認設置了 overflow-x: hiddne;，導致繪制不完整，所以需要覆蓋這個樣式：

page {
  overflow-x: scroll;
}
復制代碼

• 繪制完畢后，避免頁面橫向溢出

當上一步繪制完成 canvas后，并成功將圖片繪制到頁面上時，如果當前設備的寬度小于 iphone 6，又由于前面給 page元素設置了 overflow-x: scroll，所以此時 canvas元素肯定會撐大頁面，讓頁面上出現一個橫向的滾動條，而用戶看到的圖片寬度是和設備寬度相同，不應該出現這種情況

解決方法，一種是直接使用 wx-if這種條件語句刪掉 canvas元素，但是在低版本的基礎庫上，可能會報 e.canvasId is undefined的錯誤(雖然根據實測來看，似乎并不影響正常功能) 第二種就是減少 canvas的尺寸，反正已經繪制好圖片了，后面也用不到它了，而且用戶也看不到，那就可以隨意減小尺寸，我的做法是干脆無論寬高通通設為 0，免得又出現什么 bug

// 避免在尺寸小的設備上溢出
this.setData({
  canvasWidth: 0,
  canvasHeight: 0
})
復制代碼

以上，兩種方法都可以選擇，各有利弊，第一種要寫很多 rem轉換，第二種需要做的操作又比較多，各有利弊，根據真實需求進行抉擇即可。

到此，相信大家對“小程序Canvas繪圖不同尺寸設備UI兼容的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！