微信小程序 | canvas繪圖

一、新的尺寸單位 rpx

　　rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。

　　規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

　　設備 rpx換算px (屏幕寬度/750)； px換算rpx (750/屏幕寬度)

二、小程序canvas總結

　　小程序繪製的單位是px， 基礎知識點請參考文檔 ；

　　canvas中存在一個座標系，二維的，左上角座標系（0，0）；

　　小程序 canvas 層級在視圖中是最高的，高於通常的<view></view>, 覆蓋 canvas 的層級用 cover-view；

　　canvas 繪製在線圖片連接，須要匹配合法域名；且須要先使用 wx.downloadFile({}) 下載，生成圖片的臨時路徑以後再繪製；

　　下邊是封裝的 導出高清圖，而且顯示預覽圖片的使用場景，　　

  1 const qr = require('../qrcode')
  2 
  3 /**
  4  * system.windowWidth 可以使用窗口寬度
  5  * system.windowHeight 可以使用窗口高度
  6  */
  7 const system = wx.getSystemInfoSync()
  8 const w = 562
  9 const h = 1000
 10 
 11 function rpx(n, sizeType) {
 12   if (sizeType === 'save') {
 13     return n
 14   } else {
 15     return n * system.windowWidth / 750
 16   }
 17 }
 18 
 19 function downloadImg (link) {
 20   return new Promise((resolve, reject) => {
 21     wx.downloadFile({
 22       url: link,
 23       success: res => {
 24         if (res.statusCode === 200) {
 25           resolve(res.tempFilePath)
 26         }
 27       }
 28     })
 29   })
 30 }
 31 
 32 module.exports = {
 33   /**
 34    * @param data
 35    *   data.title
 36    *   data.price
 37    *   data.unit
 38    *   data.url
 39    * @param option.sizeType 顯示: display, 保存: save
 40    */
 41   draw (ctx, data, option = {}) {
 42     var sizeType = option.sizeType === 'save' ? 'save' : 'display'
 43     return new Promise((resolve, reject) => {
 44       
 45       var bg_url = 'https://static001-test.geekbang.org/resource/image/c5/63/c54a6fde89dd9897a321a070a0555363.jpg'
 46       var avatar_url = 'https://static001-test.geekbang.org/resource/image/35/65/35012b5a4b7576faaa1e565da142a565.png'
 47       var column_url = 'https://static001-test.geekbang.org/resource/image/35/65/35012b5a4b7576faaa1e565da142a565.png'
 48       var code_url ='https://static001-test.geekbang.org/resource/image/e6/07/e618015af89d6ffcf37a6d148dff0b07.png'
 49 
 50       var bg_path = ''
 51       var avarar_path = ''
 52       var col_path = ''
 53       var code_path = ''
 54 
 55       downloadImg(bg_url) // 下載背景
 56       .then((path)=> {
 57         bg_path = path
 58         downloadImg(avatar_url) // 下載頭像
 59         .then((path) => {
 60           avarar_path = path
 61           downloadImg(column_url) // 下載專欄圖片
 62           .then((path) => {
 63             col_path = path
 64             downloadImg(code_url) // 下載小程序菊花圖
 65             .then((path) => {
 66               code_path = path
 67               ctx.beginPath()
 68               ctx.drawImage(bg_path, 0, 0, rpx(w, sizeType), rpx(h, sizeType)) // 畫 背景
 69               ctx.save()
 70               ctx.arc( rpx(35 + 75/2,sizeType), rpx(44 +75/2, sizeType), rpx(75/2, sizeType), 0, 2 * Math.PI)
 71               ctx.clip()
 72               ctx.drawImage(avarar_path, rpx(35,sizeType), rpx(44, sizeType), rpx(75, sizeType), rpx(75, sizeType)) // 畫 頭像
 73               ctx.restore()
 74               ctx.drawImage(col_path, rpx(58,sizeType), rpx(305, sizeType), rpx(152, sizeType), rpx(152, sizeType)) // 畫 專欄封面
 75               ctx.drawImage(code_path, rpx(219,sizeType), rpx(710, sizeType), rpx(129, sizeType), rpx(129, sizeType)) // 畫 菊花碼
 76               // 基礎
 77               ctx.setTextAlign('left')
 78               ctx.setTextBaseline('normal')
 79               // 暱稱 |<--
 80               ctx.setFillStyle('#Af7628')
 81               ctx.setFontSize(rpx(22, sizeType))
 82               ctx.fillText('小原-極客時間', rpx(118,sizeType), rpx(81, sizeType)) // 微信bug 參數分別是 ‘string’ 左下角x座標 左下y座標
 83               // 專欄名稱 |<--
 84               ctx.setFontSize(rpx(28, sizeType))
 85               ctx.setFillStyle('#916a34')
 86               ctx.fillText('左耳聽風', rpx(227,sizeType), rpx(332, sizeType))
 87               // 做者信息 |<--
 88               ctx.setFontSize(rpx(19, sizeType))
 89               ctx.setFillStyle('#ad936f')
 90               ctx.fillText('陳皓 網名「左耳朵耗子」，資深...', rpx(227,sizeType), rpx(363, sizeType), rpx(296, sizeType))
 91               // 學習人數 |<--
 92               ctx.setFontSize(rpx(18, sizeType))
 93               ctx.setFillStyle('#ad936f')
 94               ctx.fillText('204人已參加學習', rpx(227,sizeType), rpx(390, sizeType), rpx(263, sizeType))
 95               // 還差 2 人 |<--
 96               ctx.setFontSize(rpx(32, sizeType))
 97               ctx.setFillStyle('#B67e34')
 98               ctx.fillText('2', rpx(207,sizeType), rpx(599, sizeType), rpx(31, sizeType))
 99               // 原價  -->|
100               ctx.setTextBaseline('bottom')
101               ctx.setTextAlign('right')
102               ctx.setFontSize(rpx(17,sizeType))
103               ctx.setFillStyle('#cd9e5e')
104               ctx.fillText('原價 ¥299', rpx(489, sizeType), rpx(422, sizeType), rpx(115, sizeType))
105               // 現價  -->|
106               ctx.setFontSize(rpx(32,sizeType))
107               ctx.setFillStyle('#cd9e5e')
108               ctx.setTextBaseline('bottom')
109               ctx.fillText('¥199', rpx(489,sizeType), rpx(459, sizeType), rpx(118, sizeType))
110               // 狀態 -->|<--
111               ctx.setTextAlign('center')
112               ctx.setFontSize(rpx(35,sizeType))
113               ctx.setFillStyle('#9d5c00')
114               ctx.fillText('拼團進行中', rpx(w,sizeType) / 2, rpx(239, sizeType))
115               
116               ctx.draw()
117               resolve()
118             })
119           })
120         })
121       })
122       
123     })
124   },
125   /**
126    * @param option.sizeType 顯示: display, 保存: save
127    */
128   getSize (data, option = {}) {
129     var sizeType = option.sizeType === 'save' ? 'save' : 'display'
130     return {width: rpx(w, sizeType), height: rpx(h, sizeType)}
131   },
132   getInfo () {
133     return {
134       btnName: '保存分享海報'
135     }
136   }
137 }

View Code