1、新的尺寸单位 rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750)； px换算rpx (750/屏幕宽度)
2、小程序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 }
