本篇文章主要介绍了微信小程序中实现手指缩放图片的示例代码，现在分享给大家，也给大家做个参考。
公司开发微信小程序，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 初始化。
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 = touch.scale + 0.005 * distanceDiff
// 为了防止缩放得太大，所以scale需要限制，同理最小值也是
if(newScale >= 2) {
newScale = 2
}
if(newScale <= 0.6) {
newScale = 0.6
}
let scaleWidth = newScale * touch.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.scaleHeight': e.detail.height
})
}
})
wxml文件对应如下，就不做解释了：
上面是我整理给大家的，希望今后会对大家有帮助。
短视频去水印微信小程序
下载
抖猫高清去水印微信小程序，源码为短视频去水印微信小程序全套源码，包含微信小程序端源码，服务端后台源码，支持某音、某手、某书、某站短视频平台去水印，提供全套的源码，实现功能包括：1、小程序登录授权、获取微信头像、获取微信用户2、首页包括：流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱：包括视频镜头分割（可自定义时长分割）、智能分割（根据镜头自动分割）、视频混剪、模糊图片高
相关文章：
