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 }
原文地址：https://www.cnblogs.com/wuhaoquan/p/9090335.html
时间： 2024-11-10 02:04:44