微信小程序 图片缩放

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

那就做吧

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

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

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

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

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

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

 

里面这个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(){
    // 页面关闭
    
  }
})