微客导航 » 文章资讯 » 微信小程序中实现手指缩放图片的示例代码

微信小程序中实现手指缩放图片的示例代码

2023-09-15 12:37:04 286

公司开发微信小程序，pm想实现如下需求：

用手指缩放图片。其实在实现这个需求以前，并不知道，微信公众号以及微信小程序里面有一个原生的api就自带这个特效，而且微信朋友圈也是用的这个api。wx.previewImage，就是它。预览图片。除了不能预览开发环境的本地电脑的图片外，你手机真机的图片，以及http服务器上的图片都是可以预览的，而且缩放功能做得很流畅。下面就说说如何用js来实现这个功能吧。

先上源码，然后在逐步剖析：

Page({
data:{
touch:{
distance:0,
scale:1,
baseWidth:null,
baseHeight:null,
scaleWidth:null,
scaleHeight:null
}
},
touchstartCallback:function(e){
//单手指缩放开始，也不做任何处理
if(e.touches.length==1)return
console.log('双手指触发开始')
//注意touchstartCallback真正代码的开始
//一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug
//当两根手指放上去的时候，就将distance初始化。
letxMove=e.touches[1].clientX-e.touches[0].clientX;
letyMove=e.touches[1].clientY-e.touches[0].clientY;
letdistance=Math.sqrt(xMove*xMove+yMove*yMove);
this.setData({
'touch.distance':distance,
})
},
touchmoveCallback:function(e){
lettouch=this.data.touch
//单手指缩放我们不做任何操作
if(e.touches.length==1)return
console.log('双手指运动')
letxMove=e.touches[1].clientX-e.touches[0].clientX;
letyMove=e.touches[1].clientY-e.touches[0].clientY;
//新的ditance
letdistance=Math.sqrt(xMove*xMove+yMove*yMove);
letdistanceDiff=distance-touch.distance;
letnewScale=touch.scale+0.005*distanceDiff
//为了防止缩放得太大，所以scale需要限制，同理最小值也是
if(newScale>=2){
newScale=2
}
if(newScale<=0.6){
newScale=0.6
}
letscaleWidth=newScale*touch.baseWidth
letscaleHeight=newScale*touch.baseHeight
//赋值新的=>旧的
this.setData({
'touch.distance':distance,
'touch.scale':newScale,
'touch.scaleWidth':scaleWidth,
'touch.scaleHeight':scaleHeight,
'touch.diff':distanceDiff
})
},
bindload:function(e){
//bindload这个api是组件的api类似的onload属性
this.setData({
'touch.baseWidth':e.detail.width,
'touch.baseHeight':e.detail.height,
'touch.scaleWidth':e.detail.width,
'touch.scaleHeight':e.detail.height
})
}
})

wxml文件对应如下，就不做解释了：

写到这里发现，就算小程序用不了这个js，我的ht5页面也是可以用的，哈哈。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序中实现手指缩放图片的示例代码

热门推荐

随机推荐