移动端手势hammer

最近在做一个微信端商城项目，其中一个大的模块就是定制。用户自己选择、上传素材或编辑文字，然后能对素材进行拖曳、旋转和缩放放大的效果。第一次接触所以百度了很多大家比较推荐的是百度云Clouda团队维护，也是在百度内部广泛使用的开发工具touch.js。不过在开发过程中遇到了很过问题。当我重新创建个div后需要接触前一个div的手势事件，我查找了很多资料了touch.js 的api，虽然文档上说用touch.off能解除事件可是会报错提示pinch、drag等手势define，一直都没找到解决的方法。然后在搜索中还发现了另一个手势插件hammer，hammer是个开源的库而且体积小巧。hammer很好的解决了我的问题，下面是我自己整合的项目中需要用到的手势事件：要先引入hammer.js文件

var rotateVal=0;//旋转值
var scaleVal=1;//缩放值
var catHammer = {
    init:function (objHammer) {
        objHammer.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
        objHammer.add(new Hammer.Swipe()).recognizeWith(objHammer.get('pan'));
        objHammer.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(objHammer.get('pan'));
        objHammer.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([objHammer.get('pan'), objHammer.get('rotate')]);

        objHammer.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
        objHammer.add(new Hammer.Tap());
    },
    //拖动
    drag:function (objHammer,element) {
        var START_X =0,START_Y=0;
        objHammer.on('panstart panmove',function (event) {//拖动开始、移动
            event.preventDefault();
            element.style.left =START_X  +event.deltaX+ 'px';
            element.style.top = START_Y +event.deltaY+'px';
        });
        objHammer.on('panend',function (event) {//拖动结束
            event.preventDefault();
            START_X += event.deltaX ;
            START_Y += event.deltaY;
            console.log("START_X==="+START_X);
            console.log("START_Y==="+START_Y)
        });
    },
    //旋转
    setrotate:function (objHammer, element) {
        var initAngle = 0;
        objHammer.on('rotatestart rotatemove',function (event) {
            event.preventDefault();
            rotateVal = initAngle+event.rotation
            element.style.transform = 'rotate('+rotateVal+'deg) scale('+scaleVal+')';
        });
        objHammer.on('rotateend',function (event) {
            event.preventDefault();
            initAngle = initAngle+event.rotation;
        })
    },
    //缩放
    setScale:function (objHammer, element) {
        var initScale = 1;
        var currentScale;
        objHammer.on('pinchstart pinchmove ',function (event) {
            event.preventDefault();
            currentScale = event.scale - 1;
            currentScale = initScale + currentScale
            scaleVal = currentScale;
            element.style.transform = 'rotate('+rotateVal+'deg) scale('+scaleVal+')';
        });
        objHammer.on('pinchend',function (event) {
            event.preventDefault();
            initScale = currentScale;
        })
    },
    //解除事件
    setoff:function (objHammer) {
        // objHammer.off("");
        console.log('off');
        objHammer.off("panstart panmove panend pinchstart pinchmove  pinchend rotatestart rotatemove pinchend")
    }
}

然后直接调用catHammer。

$(function){
   var element = document.getElementById('target');
   var objHammer = new Hammer(element);//创建一个实例objHammer
  catHammer.init(objHammer);//初始化
  catHammer.drag(objHammer,element);//拖曳
   catHammer.setrotate(objHammer,element);//旋转
  catHammer.setScale(objHammer,element);//缩放
}