小程序实现图片双指缩放

一：小程序实现图片双指缩放介绍

1：大体思路
监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化，确定图片缩放倍数，然后根据倍数给图片赋值新的宽高进行缩放图片。
2：需要的标签
实现图片的缩放，需要一个容器存放图片。微信为视图组件提供了 scroll-view 和 view 两种容器。图片放大的情况下是需要滑动屏幕进行查看的，所以我用了scroll-view。容器里面放的就是image标签

2：小程序实现图片双指缩放的事件
scroll-view标签上面需要两个事件：bindtouchstart （双手指触发开始事件） bindtouchmove（双指移动事件）
image标签上面绑定一个事件：bindload（微信小程序image图片加载完成监听）

二：html代码

<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>

二：css代码

page {
  height: 100%;
}

.content {
  height: 100%;
  font-size: 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.images image {
  text-align: center;
}

四：js代码

1：初始化变量

 data: {
    dataimg: '',//图片地址
    distance: 0,//手指移动的距离
    scale: 1,//图片的比例
    baseWidth: null,//图片真实宽度
    baseHeight: null,//图片真实高度
    scaleWidth: '',//图片设显示宽度
    scaleHeight: '',//图片设显示高度
  },

2：初始化时候加载图片

 var that = this;
 that.setData({
       dataimg: CONF.imgUrl+'static/prize/map1.jpg',
  })

3：监听图片加载完成

 /**
   * 监听图片加载成功时触发
   */
  imgload: function(e) {
    this.setData({
      'baseWidth': e.detail.width, //获取图片真实宽度
      'baseHeight': e.detail.height, //获取图片真实高度
      'scaleWidth': '100%', //给图片设置宽度
      'scaleHeight': '100%' //给图片设置高度
    })
  },

4：双指开始移动，计算两个手指的坐标

/**
   * 双手指触发开始 计算开始触发两个手指坐标的距离
   */
  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,
    })
  },

5：双手指移动 计算两个手指坐标和距离

/**
   * 双手指移动   计算两个手指坐标和距离
   */
  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
      })
    }
  },