【vue 移动端使用alloyfinger操作图片拖拽缩放】

alloyfinger：腾讯前端开发的一款轻量级的移动端开源手势库
Github地址：https://github.com/AlloyTeam/AlloyFinger 和 一些些 效果演示

1.安装

npm i alloyfinger -S

2.在页面中导入使用

<template>
  <div class="box clmcenter"> 
       <div class="citybgbox">
         <img :src="cityimgsrc" class="cityphoto">         
         <img :src="personimg" class="personphoto" ref="pic" :style="{'transform': 'translate('+ posX + 'px,' + posY + 'px) translateZ(0px) scale(' + dis + ')  rotate(' + angle + 'deg)'}">         
       </div>
  </div>
</template>
<script>
// 阻止页面的滑动默认事件
document.body.addEventListener(
  'touchmove',
  function (e) {
    e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
  },
  { passive: false }
) // passive 参数不能省略，用来兼容ios和android

//引入alloyfinger
import AlloyFinger from 'alloyfinger';
export default {
  data () {
    return {
      cityimgsrc: require(`../assets/img/city1.jpg`),
      personimg: require(`../assets/img/giftbox.png`),
      posX: 0, //X轴移动距离
      posY: 0, //Y轴移动距离
      dis: 1, //缩放倍数
      angle: 0, //旋转角度
    }
  },
  mounted () {
    this.getData();
  },
  methods: {
    getData () {
      let that = this;
      let pic = this.$refs.pic;
      this.af = new AlloyFinger(pic, {
        rotate: function (evt) {
          console.log("实现旋转");
          that.angle += evt.angle;
        },
        pinch: function (evt) {
          console.log("实现缩放");
          that.dis = evt.zoom;
        },
        pressMove: function (evt) {
          console.log("实现移动");
          that.posX += evt.deltaX;
          that.posY += evt.deltaY;
        },
        tap: function (evt) {
          console.log("单击");
          //点按触发
        },
        doubleTap: function (e) {
          console.log("双击");
          //双击屏幕触发
        },
        longTap: function (e) {
          console.log("长按");
          //长按屏幕750ms触发
        },
        swipe: function (e) {
          //e.direction代表滑动的方向
          console.log("swipe" + e.direction);
        },
        multipointStart: function (e) {
          //一个手指以上触摸屏幕触发
          console.log('手指数：'+e.touches.length);
        },
        multipointEnd: function () {
        //当手指离开，屏幕只剩一个手指或零个手指触发
        },
      });
    }   
  }
}
</script>

转载自AlloyTeam：http://www.alloyteam.com/2016/05/super-small-web-gesture-library-alloyfinger-released/