vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

最近开发一个活动需要在手机上给上传的头像加上边框、装饰，需要拖拽、手势缩放边框下的头像图片，因为是vue项目，开始尝试了vue-drag-resize这个组件，对图片拖拽支持很完美，但是无法手势缩放，果断放弃，最后选用了腾讯的AlloyTeam团队的开源的手势库AlloyFinger，闲话少说直接上代码

 

1、下载

npm install alloyfinger

　　

2、main.js全局配置

import AlloyFinger from 'alloyfinger'
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'

Vue.use(AlloyFingerPlugin,{
  AlloyFinger
})

　　

3、组件内使用

<div v-finger:pinch="pinchHandler"
     v-finger:press-move="pressMoveHandler"
     v-finger:multipoint-start="multipointStartHandler"
     v-finger:rotate="rotateHandler"
     v-finger:tap="tapHandler"
     v-finger:multipoint-end="multipointEndHandler"
     v-finger:double-tap="doubleTapHandler"
     v-finger:long-tap="longTapHandler"
     v-finger:swipe="swipeHandler"
     v-finger:single-tap="singleTapHandler">

//滑动的有效区域
</div>

　　

        pointStartHandler() {
            //手指触摸屏幕触发
        },
        multipointStartHandler() {
            //一个手指以上触摸屏幕触发
        },
        rotateHandler(evt) {
            //evt.angle代表两个手指旋转的角度
            console.log(evt.angle);
        },
        pinchHandler(evt) {
            //evt.scale代表两个手指缩放的比例
            console.log(evt.scale);
        },
        multipointEndHandler() {
            //当手指离开，屏幕只剩一个手指或零个手指触发
        },
        pressMoveHandler(evt) {
            //evt.deltaX和evtdeltaY代表在屏幕上移动的距离
            console.log(evt.deltaX);
            console.log(evt.deltaY);
        },
        tapHandler(evt) {
            //点按触发
        },
        doubleTapHandler(evt) {
            //双击屏幕触发
        },
        longTapHandler(evt) {
            //长按屏幕750ms触发
        },
        swipeHandler(evt) {
            //evt.direction代表滑动的方向
            console.log("swipe" + evt.direction);
        },
        singleTapHandler(evt) {
            //单击
        }    

　　

ps:拖动对于移动端兼容不是太理想，正在优化中~