微信小程序实现画布各种手机尺寸自适应

实现思路，获取组件节点的宽高，然后把组件rpx单位的宽高填充到画布的px单位，通过

wx.createSelectorQuery().select(’#canvas-container’).boundingClientRect(function (rect) {

var width = rect.width // 节点的宽度节点高度为 rect.height

}).exec()

获取节点的rpx单位的宽高会自动转换成px单位。

  <view id='canvas-container' style='width:200rpx;height:100rpx;'>

    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {var width = rect.width/2   // 节点的宽度}).exec()

使用在画布里面：

          ctx.translate(width, width);

微信小程序实现画布各种手机尺寸自适应相关推荐

微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序客服系统手机版五大功能介绍
很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时 ...
微信小程序：添加到手机通讯录
微信小程序:添加到手机通讯录 wxml: <button class="spbg" bindtap="addPhone">存入手机通讯录</b ...
微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片.文字等等进行操作,比如移动一下,旋转一下或者缩放等等.但普通的画布 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
微信小程序实现画布自适应各种手机尺寸
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 解决的问题: 画布,动画等js里面的操作,默认是px而不是rpx, 无法根据手机屏幕自适应达到的效 ...
微信小程序，画布中，根据需要展示的图片比例，获取能截取原图中的最大图片尺寸，并且不变形展示
在微信小程序中,想要做一个分享海报,就需要用到画布,在画布上绘制图片时就会遇到图片变形的情况,下面我会给出我的解决办法. 先画个图片意思意思下: 1. 先根据传入图片地址获取原图片的尺寸: // 获取 ...

微信小程序实现画布各种手机尺寸自适应

微信小程序实现画布各种手机尺寸自适应相关推荐

最新文章

热门文章