移动端手势hammer

使用Hammer.js实现移动端手势操作

最新推荐文章于 2024-01-27 17:56:18 发布

原创

最新推荐文章于 2024-01-27 17:56:18 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web前端开发 #hammer 移动端手势

在微信端商城项目的定制模块中，需要实现用户素材的拖曳、旋转和缩放功能。在尝试并遇到touch.js的问题后，转向了开源库Hammer.js。Hammer.js不仅小巧，且能有效解决解除手势事件的难题。以下是整合到项目中的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({ threshol

最低0.47元/天解锁文章