前言
本文分析怎么在微信小程序实现双指缩放图片的功能。
实现过程
1. 文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析；
<!--index.wxml-->
<view class='wrapper'>
<view class="container">
<view class="title">双指缩放图片</view>
<scroll-view class='images' scroll-y="true" scroll-x="true" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
<image mode="aspectFit" src="../../images/big.jpg" style="width:{
{scaleWidth }}px;height:{
{scaleHeight}}px" bindload="imgload"></image>
<!-- <image mode="aspectFit" src="../../images/small.jpg" style="width:{
{scaleWidth }}px;height:{
{scaleHeight}}px" bindload="imgload"></image> -->
</scroll-view>
</view>
</view>/**index.wxss**/
.container {
margin-top: 30rpx;
}
.container .title {
margin-bottom: 20rpx;
font-weight: bold;
}2. 文件index.js存放所有功能的逻辑代码，主要思路是先计算触摸时双指的距离（distance），然后计算移动过程的双指距离并跟触摸时的距离的差值（distanceDiff）来计算缩放比例（newScale），最后用计算出的缩放比例来缩放图片（scaleWidth和scaleHeight）；代码实现如下：
1）新建公共方法calcDistance，用来计算双指的距离；
2）新建方法imgload，当图片载入完毕时获取图片实际宽度（baseWidth）和高度（baseHeight）、用来计算的固定宽度（initWidth，原图宽度大于屏幕宽度则设置为屏幕宽度，反之则设置为原图宽度）和高度（initHeight，原图宽度大于屏幕宽度则设置为原图高度/倍数，反之则设置为原图高度）、图片缩放后的宽度（scaleWidth，初始化跟initWidth一致）和高度（scaleHeight，初始化跟initHeight一致）；
3）新建方法touchstartCallback，计算双指触摸时双指的距离distance；
4）新建方法touchmoveCallback，计算手指移动时双指的距离distance，跟触摸距离相减得出差值distanceDiff；然后利用差值计算出缩放比例newScale，最后使用newScale缩放图片，从而实现缩放效果。
//index.js
Page({
/**
* 页面的初始数据
*/
data: {
distance: 0, // 手指移动的距离
scale: 1, // 缩放比例
baseWidth: '', // 图片实际宽度
baseHeight: '', // 图片实际高度
initWidth: '', // 图片默认显示宽度
initHeight: '', // 图片默认显示高度
scaleWidth: '', // 图片缩放后的宽度
scaleHeight: '', // 图片缩放后的高度
},
/**
* 监听图片加载成功时触发
*/
imgload: function (e) {
this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数
let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度
let width = this.multiple > 1 ? this.width : e.detail.width;
this.setData({
baseWidth: e.detail.width, // 获取图片实际宽度
baseHeight: e.detail.height, // 获取图片实际高度
initWidth: width,
initHeight: height,
scaleWidth: width,
scaleHeight: height,
})
},
/**
* 双手指触发开始 计算开始触发两个手指坐标的距离
*/
touchstartCallback: function (e) {
// 单手指缩放开始，不做任何处理
if (e.touches.length == 1) return;
let distance = this.calcDistance(e.touches[0], e.touches[1]);
this.setData({
'distance': distance,
})
},
/**
* 双手指移动 计算两个手指坐标和距离
*/
touchmoveCallback: function (e) {
// 单手指缩放不做任何操作
if (e.touches.length == 1) return;
let distance = this.calcDistance(e.touches[0], e.touches[1]);
// 计算移动的过程中实际移动了多少的距离
let distanceDiff = distance - this.data.distance;
let newScale = this.data.scale + 0.005 * distanceDiff;
if (newScale >= this.multiple && this.multiple > 2) { // 原图比较大情况
newScale = this.multiple;
} else if (this.multiple < 2 && newScale >= 2) { // 原图较小情况
newScale = 2; // 最大2倍
};
// 最小缩放到0.3
if (newScale <= 0.3) {
newScale = 0.3;
};
let scaleWidth = newScale * this.data.initWidth;
let scaleHeight = newScale * this.data.initHeight;
this.setData({
distance: distance,
scale: newScale,
scaleWidth: scaleWidth,
scaleHeight: scaleHeight,
diff: distanceDiff
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取屏幕宽度
this.width = wx.getSystemInfoSync().windowWidth;
},
/**
* 计算两个手指距离
*/
calcDistance(pos0, pos1) {
let xMove = pos1.clientX - pos0.clientX;
let yMove = pos1.clientY - pos0.clientY;
return (Math.sqrt(xMove * xMove + yMove * yMove));
}
})扫描公众号，了解更多实例分享：
