您的位置:首页 > 游戏 > 手游 > 微信小程序canvas画图使用百分比适配不同机型屏幕达到任何屏幕比例皆可!完美适配任何机型!指定canvas尺寸适配亦可!保证全网唯一完美

微信小程序canvas画图使用百分比适配不同机型屏幕达到任何屏幕比例皆可!完美适配任何机型!指定canvas尺寸适配亦可!保证全网唯一完美

2024/12/23 5:59:59 来源:https://blog.csdn.net/Qensq/article/details/139309191  浏览:    关键词:微信小程序canvas画图使用百分比适配不同机型屏幕达到任何屏幕比例皆可!完美适配任何机型!指定canvas尺寸适配亦可!保证全网唯一完美

错误代码示例 

// 在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)})});
},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com