微信小程序 图片缩放

在图片浏览的时候，一个很重要的操作就是两个手指一起在图上捏捏捏，缩放嘛。我天真的以为这个应该和ios一样的，有个scrollview里面放图就好了。我真是图样图森破，不行啊，然后上网找，也没有控件支持。不开森，网上只有大神提供的思路，就是自己做一个手势咯。

那就做吧

首先我们得理解在微信小程序上面这个手势触发有几种。这些个内容在官方文档里的框架 -> 视图层-> WXML -> 事件里可以找到。

我总结事件分两种 一种是冒泡，一种是非冒泡。

冒泡呢，就好比咱们ios里面把按钮加在了可点击的图片之上，点完按钮了，它也能把手势传递给图片，让可点击的图片也能感受到点击。

非冒泡，就是不往上走了，我定死监控哪个控件就是哪个，就是只对这个控件有效，不管你在下面加了多少层。

好了了解这么多该上代码了。如果你有更好的做法，那就教教我吧。

在.wxml层里我只写了一个scrollview，里面套了一个img，一贯做法嘛。

<view><scroll-view scroll-y="true" scroll-x="true" style="height:100%;width:100%"><image id = "SFimg" catchtouchend="endtap" catchtouchmove="movetap" bindload = "imgload" style="width:{{ scaleWidth }}px;height:{{ scaleHeight }}px" mode="aspectFit" src="{{dataimg}}"></image></scroll-view></view>

里面这个id我没有用到，就只有这一个嘛，然后写了两个手势，一个是滑动的时候需要放大或者缩小图片的长和宽，一个是当咱们手离开图片的时候，需要将上次滑动的距离弄成0，如果不这样，我们两个手指，戳戳屏幕，那图片就变了呢。

我的灵感也是来自于 http://www.jianshu.com/p/16f2b21e78d4 ，大家不明白的可以看这个，里面理论讲的挺详细的，那我就直接上代码吧，里面我改进了一下

var olddistance = 0;  //这个是上一次两个手指的距离var newdistance;      //本次两手指之间的距离，两个一减咱们就知道了滑动了多少，以及放大还是缩小（正负嘛）var oldscale = 1;     //这个是上一次动作留下的比例var diffdistance;     //这个是新的比例，新的比例一定是建立在旧的比例上面的，给人一种连续的假象var baseHeight;       //上一次触摸完之后的高var baseWidth;        //上一次触摸完之后的宽var windowWidth = 0;  //咱们屏幕的宽var windowHeight = 0; //咱们屏幕的高Page({  data:{    scaleWidth:"",    scaleHeight:"",    dataimg:"",  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数    console.log(options.img)          var res = wx.getSystemInfoSync();  //获取系统信息的同步方法，我用了异步里面提示我this.setData错了          windowWidth = res.windowWidth;               windowHeight = res.windowHeight;         //那就给前面的图片进行赋值，高，宽以及路劲          this.setData({             scaleHeight:windowHeight,                dataimg:options.img,            scaleWidth:windowWidth          })      },  //这里是图片加载完毕之后的信息，因为滑动手指距离会变，我们要跟着图片的长宽进行缩放，不能跟着屏幕的长宽进行缩放  imgload:function(e){      var originalWidth = e.detail.width;//图片原始宽      var originalHeight = e.detail.height;//图片原始高      var originalScale = originalHeight/originalWidth;//图片高宽比      var windowscale = windowHeight/windowWidth;//屏幕高宽比      if(originalScale < windowscale){//图片高宽比小于屏幕高宽比        //图片缩放后的宽为屏幕宽          baseWidth = windowWidth;                baseHeight = (windowWidth * originalHeight) / originalWidth;      }else{//图片高宽比大于屏幕高宽比        //图片缩放后的高为屏幕高         baseHeight = windowHeight;         baseWidth = (windowHeight * originalWidth) / originalHeight;      }  },  //两手指进行拖动了  movetap:function(event){     var e = event;     if(e.touches.length == 2)     {       var xMove = e.touches[1].clientX - e.touches[0].clientX;       var yMove = e.touches[1].clientY - e.touches[0].clientY;       var distance = Math.sqrt(xMove * xMove + yMove * yMove);//两手指之间的距离        if (olddistance == 0)       {          olddistance = distance; //要是第一次就给他弄上值，什么都不操作          console.log(olddistance);        }       else       {          newdistance = distance; //第二次就可以计算它们的差值了          diffdistance = newdistance - olddistance;          olddistance = newdistance; //计算之后更新          console.log(diffdistance);          var newScale = oldscale + 0.005 * diffdistance;  //比例          console.log(newScale);          //刷新.wxml          this.setData({            scaleHeight:newScale * baseHeight,            scaleWidth:newScale * baseWidth                      })               oldscale = newScale;          //更新比例       }     }  },  endtap:function(event){    console.log(event);//抬起手指，保存下数据    if(event.touches.length == 2)    {      olddistance = 0;    }  },  onReady:function(){    // 页面渲染完成      },  onShow:function(){    // 页面显示      },  onHide:function(){    // 页面隐藏      },  onUnload:function(){    // 页面关闭      }})