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:拖動對於移動端兼容不是太理想，正在優化中~