错误代码示例:
// 在onLoad中调用
const that = this
wx.getSystemInfo({success: function (res) {console.log(res)that.setData({model: res.model,screen_width: res.windowWidth/375,screen_height: res.windowHeight})}
})
我看到网上很多使用上面这种代码去适配,其实这是错误的方式,不能应用到全部场景
接下来使用如下方式处理完美适配
PS: 未经允许,禁止转载,否则法律伺候!
第一步,获取需要画图的宽高
如果是画整个屏幕,就用wx.getSystemInfoSync()获取windowWidth和windowHeight,然后把canvas宽高使用100%就行
如果是只画指定宽高大小,那么就将canvas的宽高指定,单位rpx,然后使用如下代码获取不同机型的真实宽高
<canvas canvas-id="cardCanvas" style="height: 1046rpx;width: 654rpx;" class="tsccc" catchtouchmove="true"></canvas>
wx.createSelectorQuery().select('.tsccc')obj.boundingClientRect(function (data) {data.widthdata.height}).exec()
第二步,使用一个固定机型作为参数,先将图画好
例如:使用iphone 13 pro 机型,此时.tsccc 获取的指定真实宽高是 340px 和 543px
然后根据自己所需要将canvas图绘制完成。绘制的时候直接使用固定的px数值即可。
例如:一段文字的xy和大小
ctx.setFontSize(14) //设置字体大小
ctx.fillText('张三', 40, 66); //设置文字,并指定坐标
只要能达到自己想要的绘制效果就可以了。此时绘制完成,第二步就完成了
第三步,计算百分比完美适配不同机型屏幕
此时我们是用的iphone 13pro 的屏幕作为参考,所以第二步完成的时候,就是只有13pro是正常展示的绘制内容。
将第二步获取到的340 和543 这两个参数,用于计算 x和y的百分比位置,以及绘制内容宽高的百分比位置
例如第二步的文字字体大小和x,y坐标位置:
字体大小(字体的size是高度的意思):14 除 543 = 0.02578269 (这就是字体大小固定的百分比了)
然后将 543 乘这个百分比,就是每个机型屏幕相应的大小了。
不同机型的高 乘 0.02578269 = 该机型需要的px大小
宽的方式也是如此计算
先得到百分比,在用百分比乘不同机型的宽高,得到不同机型的相应大小。
x坐标:40 除 340 = 0.117647 (这就是x坐标需要被固定的百分比了)
y坐标:66 除 543 = 0.121546 (这就是y坐标需要被固定的百分比了)
以下是完整的代码示例(已计算出百分比的):
PS:切记,不要傻傻的使用画蛇添足的写法,例如:(14 除以 543 乘 543),一定要自己手动算得到的百分比去乘宽高!跟如下代码一样
card(){Promise.all([that.getImageInfo(that.currentBackgroundUrl),that.getImageInfo(that.touxiang),that.getImageInfo(that.qrcode),]).then((res) =>{// 使用画布创建上下文 图片var ctx = wx.createCanvasContext("cardCanvas") // 绘制底图背景图。坐标及大小,括号里面的分别是(图片路径,x坐标,y坐标,width,height)ctx.drawImage(res[0].path, 0, 0, that.width,that.height) //绘制头像,图片路径,x坐标,y坐标,width,height)var tx_x=that.width*0.0647;var tx_y=that.height*0.1538;var tx_width=that.width*0.191;var tx_height=that.height*0.3077;ctx.drawImage(res[1].path, tx_x, tx_y, tx_width,tx_height) //绘制名字ctx.setFontSize(that.height*0.0884) //设置字体大小,默认10ctx.fillText('张三', that.width*0.38, that.height*0.230769); //文字内容、x坐标,y坐标//保存ctx.save(); //绘制ctx.draw(false,function(){wx.canvasToTempFilePath({width:1080,height:1760,destWidth:1080*2,//这里乘以2是为了保证合成图片的清晰度destHeight:1760*2,fileType: "jpg",canvasId: 'cardCanvas',success: function(res) {that.currentCanvasUrl = res.tempFilePathuni.hideLoading()}})}) })
},//获取图片的基本信息,即将网络图片转成本地图片,
getImageInfo(src) {return new Promise((resolve, reject) => {uni.getImageInfo({src,success: (res) => resolve(res),fail: (res) => reject(res)})});
},