微信小程序实现通过双向滑动缩放图片大小的方法
本文实例讲述了微信小程序实现通过双向滑动缩放图片大小的方法。分享给大家供大家参考，具体如下：
在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码：
js：
Page({
data:{
touch:{
distance:0,
scale:1,
baseWidth:null,
baseHeight:null,
scaleWidth:null,
scaleHeight:null
}
},
touchStartHandle(e){
//单手指缩放开始，也不做任何处理
if(e.touches.length==1){
console.log("单滑了")
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,
})
},
touchMoveHandle(e){
lettouch=this.data.touch
//单手指缩放我们不做任何操作
if(e.touches.length==1){
console.log("单滑了");
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
})
},
load: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：
最后，通过手机预览，就会发现已达到预想的效果！
希望本文所述对大家微信小程序开发有所帮助。