一：小程序实现图片双指缩放介绍
1：大体思路
监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化，确定图片缩放倍数，然后根据倍数给图片赋值新的宽高进行缩放图片。
2：需要的标签
实现图片的缩放，需要一个容器存放图片。微信为视图组件提供了scroll-view和view两种容器。图片放大的情况下是需要滑动屏幕进行查看的，所以我用了scroll-view。容器里面放的就是image标签
2：小程序实现图片双指缩放的事件
scroll-view标签上面需要两个事件：bindtouchstart （双手指触发开始事件） bindtouchmove（双指移动事件）
image标签上面绑定一个事件：bindload（微信小程序image图片加载完成监听）
二：代码
1html代码
<view class='content'>
<scroll-view class='images' scroll-y="true" scroll-x="true" style="height:100%;width:100%" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
<image mode='aspectFit' binderror="errImg" src="{{dataimg}}" style="width:{{scaleWidth }};height:{{scaleHeight}}" bindload="imgload"></image>
</scroll-view>
</view>2css代码
page {
height: 100%;
}
.content {
height: 100%;
font-size: 0;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.images image {
text-align: center;
}3js代码
数据变量
data: {
dataimg: '',//图片地址
distance: 0,//手指移动的距离
scale: 1,//图片的比例
baseWidth: null,//图片真实宽度
baseHeight: null,//图片真实高度
scaleWidth: '',//图片设显示宽度
scaleHeight: '',//图片设显示高度
},初始化图片
var that = this;
that.setData({
dataimg: CONF.imgUrl+'static/prize/map1.jpg',
})监听图片加载成功
/**
* 监听图片加载成功时触发
*/
imgload: function(e) {
this.setData({
'baseWidth': e.detail.width, //获取图片真实宽度
'baseHeight': e.detail.height, //获取图片真实高度
'scaleWidth': '100%', //给图片设置宽度
'scaleHeight': '100%' //给图片设置高度
})
},双指移动开始
/**
* 双手指触发开始 计算开始触发两个手指坐标的距离
*/
touchstartCallback: function(e) {
// 单手指缩放开始，不做任何处理
if (e.touches.length == 1) return;
// 当两根手指放上去的时候，将距离(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({
'distance': distance,
})
},双指移动计算
/**
* 双手指移动 计算两个手指坐标和距离
*/
touchmoveCallback: function(e) {
// 单手指缩放不做任何操作
if (e.touches.length == 1) return;
//双手指运动 x移动后的坐标和y移动后的坐标
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 - this.data.distance;
let newScale = this.data.scale + 0.005 * distanceDiff
// 为了防止缩放得太大，所以scale需要限制，同理最小值也是
if (newScale >= 1) {
newScale = 1
let scaleWidth = newScale * this.data.baseWidth + 'px'
let scaleHeight = newScale * this.data.baseHeight + 'px'
this.setData({
'distance': distance,
'scale': newScale,
'scaleWidth': scaleWidth,
'scaleHeight': scaleHeight,
'diff': distanceDiff
})
}
//为了防止缩放得太小，所以scale需要限制
if (newScale <= 0.3) {
newScale = 0.3
this.setData({
'distance': distance,
'scale': newScale,
'scaleWidth': '100%',
'scaleHeight': '100%',
'diff': distanceDiff
})
}
},
