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

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

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

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

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 初始化。

let xMove = e.touches[1].clientX - e.touches[0].clientX;

let yMove = e.touches[1].clientY - e.touches[0].clientY;

let distance = Math.sqrt(xMove * xMove + yMove * yMove);

this.setData({

'touch.distance': distance,

})

},

touchmoveCallback: function(e) {

let touch = this.data.touch

// 单手指缩放我们不做任何操作

if(e.touches.length == 1) return

console.log('双手指运动')

let xMove = e.touches[1].clientX - e.touches[0].clientX;

let yMove = e.touches[1].clientY - e.touches[0].clientY;

// 新的 ditance

let distance = Math.sqrt(xMove * xMove + yMove * yMove);

let distanceDiff = distance - touch.distance;

let newScale = touhttp://ch.scale + 0.005 * distanceDiff

// 为了防止缩放得太大，所以scale需要限制，同理最小值也是

if(newScale >=http:// 2) {

newScale = 2

}

if(newScale <= 0.6) {

newScale = 0.6

}

let scaleWidth = newScale * touchrItxn.baseWidth

let scaleHeight = 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.scaleHhttp://eight': e.detail.height

})

}

})

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。