微信小程序（wepy框架）scroll-view实现双指缩放图片

思路很简单：当双指触碰屏幕时，计算手指之间的距离a，当滑动时计算与
a的差值，动态改变图片的宽高即可，图片上标的点也可以乘这个差值。

<scroll-view scroll-x scroll-y scroll-left="20" style="height: 1060rpx;width: 100%;position: relative" class="scroll-img" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
        <view v-for="(item,index) in chooseList" class="point" :style="{top:item.latitude * scale+'rpx',left:item.longitude * scale+'rpx'}" @click="choose(index)">
          <view class="map-detail" v-if="activeIndex==index">
            <view>项目名称：{{item.position_name}}</view>
            <view>开放时间：{{item.business_hours}}</view>
          </view>
        </view>
        <image @click="close()"  style="width:{{scaleWidth }}px;height:{{scaleHeight}}px"  bindload="imgload" src="./img/map1.jpg"></image>
      </scroll-view>

data: {
  //  ---------------------------------
    distance: 0, // 手指移动的距离
    scale: 1, // 缩放比例
    baseWidth: '', // 图片实际宽度
    baseHeight: '', // 图片实际高度
    initWidth: '', // 图片默认显示宽度
    initHeight: '', // 图片默认显示高度
    scaleWidth: '', // 图片缩放后的宽度
    scaleHeight: '', // 图片缩放后的高度
    width:''

  },

imgload: function (e) {
      // console.log(123123548451478513215)
      // console.log(e.$wx.detail)
      this.multiple = e.$wx.detail.width / this.width; // 计算原图和默认显示的倍数
      let height = this.multiple > 1 ? e.$wx.detail.height / this.multiple : e.$wx.detail.height; // 等比例计算出默认高度
      let width = this.multiple > 1 ? this.width : e.$wx.detail.width;
      this.baseWidth = e.$wx.detail.width
      this.baseHeight = e.$wx.detail.height
      this.initWidth = width
      this.initHeight = height
      this.scaleWidth = width
      this.scaleHeight = height
      // 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]);
      // console.log(distance)
      this.distance = distance
      console.log(123123132)
    },
    /**
     * 双手指移动   计算两个手指坐标和距离
     */
    touchmoveCallback: function (e) {
      // 单手指缩放不做任何操作
      if (e.touches.length == 1) return;
      let distance = this.calcDistance(e.touches[0], e.touches[1]);
      // 计算移动的过程中实际移动了多少的距离
      let distanceDiff = distance - this.distance;
      let newScale = this.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.initWidth;
      let scaleHeight = newScale * this.initHeight;
      this.distance= distance
      this.scale= newScale
      this.scaleWidth = scaleWidth
      this.scaleHeight = scaleHeight
      this.diff = distanceDiff
      // this.setData({
      //   distance: distance,
      //   scale: newScale,
      //   scaleWidth: scaleWidth,
      //   scaleHeight: scaleHeight,
      //   diff: distanceDiff
      // });
    },
    /**
     * 计算两个手指距离
     */
    calcDistance(pos0, pos1) {
      let xMove = pos1.clientX - pos0.clientX;
      let yMove = pos1.clientY - pos0.clientY;
      return (Math.sqrt(xMove * xMove + yMove * yMove));
    },

 onLoad(options) {
    this.width = wx.getSystemInfoSync().windowWidth;
  },