移动端手势缩放

	项目需求说是附件打开文档查看的时候，需要通过手势缩放来查看文档内容。作为新人小白，没啥思路，第一个想法就是找度娘。在网上查过很快就找到了想关的内容，看过后，也实验了一番，总是会有点小问题，今天在这也就是做一个记录整理下。

直接贴代码：

// 图片的缩放
     window.onload = function() {
       function setGesture(el){
          var obj = {}; //定义一个对象
          var istouch = false;
          var start = [];
          //监听touchstart事件
          el.addEventListener("touchstart",function(e){
            if(e.touches.length >= 2){  //判断是否有两个点在屏幕上
              istouch = true;
              start = e.touches;  //得到第一组两个点
              obj.gesturestart && obj.gesturestart.call(el); //执行gesturestart方法
            };
          },false);
          //监听touchmove事件
          el.addEventListener("touchmove",function(e){
            if(e.touches.length >= 2 &&  istouch){
              var now = e.touches;  //得到第二组两个点
              var scale = getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例，getDistance是勾股定理的一个方法
              e.scale = scale.toFixed(2);
              obj.gesturemove && obj.gesturemove.call(el,e);  //执行gesturemove方法
            }
              
          },false);
          //监听touchend事件
          el.addEventListener("touchend",function(e){
            if(istouch){
              istouch=false;
              obj.gestureend && obj.gestureend.call(el);  //执行gestureend方法
            };
          },false);
          return obj;
        };
        //两点的距离
        function getDistance(p1, p2) {
            var x = p2.pageX - p1.pageX,
                y = p2.pageY - p1.pageY;
            return Math.sqrt((x * x) + (y * y));
        };
        //方法调用（这里是根据需要来实现调用）
        var imgpreview = document.getElementById("viewer");
        //有时候会出现平布大小不兼容，这边做一个兼容处理
        var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        imgpreview.style.width = w+"px";
        imgpreview.style.height = h+"px";
        var boxGesture = setGesture(imgpreview);
        boxGesture.gesturemove=function(e){  //双指移动
          imgpreview.style.transform="scale("+e.scale+")";//改变目标元素的大小
          if (e.scale > 3) {
            imgpreview.style.transform="scale(4)";
          }
        };

     }

gesturestart、gesturemove、gestureend在网上看到说是这些方法对ios和安卓能够兼容，就也加上了，不过具体在ios上展示是什么样的我还不知道，目前是只测试了安卓手机的。

这个方法我是在原生前端页面作为一个js方法调用的，也可以根据vue语法进行改造，不过在vue中我没有添加ios的兼容方法，对vue中引入这个方法还不知道怎么弄，会报错所以我就放弃了。

贴一下我在vue中用到的，跟上面的方法一样，只是写法转换一下