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:拖动对于移动端兼容不是太理想，正在优化中~

巴特西

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

最新文章

热门文章