let canvas = wx.createCanvasContext("shareCanvas");
//绘制背景
canvas.drawImage(res[1].path, 0, 0, 301, 420);
canvas.save();
//绘制二维码
canvas.drawImage(res[0].path, 108, 262, 85, 85);
//绘制文字
canvas.font = "normal bold 20px sans-serif";
canvas.fillStyle = "#fff";
canvas.setTextAlign("center");
canvas.fillText("您的好友“" + this.wechat + "”", 150, 40);
canvas.fillText("送你20元红包", 150, 65);
canvas.draw();
我的做法是 不管你手机屏幕多大 全部生成一个固定尺寸的图片
省的有的屏幕小 有的屏幕大 上面的内容适配也麻烦 屏幕小了 挤到一起去了
屏幕大了 空出来一大块
我用mpvue 写不了固定
可以 宽度高度定死就可以了
/**
*
* 根据比例适配长度
* @param {Number} v 计算前长度
* @returns {Number} 计算后的长度
*/
function getSize(v) {
return v * (this.windowWidth / 375)
}
375是ui图的尺寸 windowWidth是当前屏幕宽度
canvas是使用px作为单位的,匹配多个手机型号需要用rpx按比例转化成px,这是我写的,e是获取的设备信息,基本满足使用
ratioRPX(e) {
return
e.screenWidth <= 320 && 0.426 ||
e.screenWidth <= 360 && 0.48 ||
e.screenWidth <= 375 && 0.5 ||
e.screenWidth <= 395 && 0.526 ||
0.552
}
大哥在逻辑怎么使用,就是这个转化值之后 我在哪更改呢
用rpx乘于这个返回值就是px
不行大哥,办公室的都匹配不全, 还有没有其它方案
匹配不全的话你就继续在比例里添加
用e.screenWidth去除750就能的到相应的换算值了