移动端手势hammer
来源:互联网 发布:积分数据库设计 编辑:程序博客网 时间:2024/05/21 17:16
最近在做一个微信端商城项目,其中一个大的模块就是定制。用户自己选择、上传素材或编辑文字,然后能对素材进行拖曳、旋转和缩放放大的效果。第一次接触所以百度了很多大家比较推荐的是百度云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);//缩放}
0 0
- 移动端手势hammer
- 移动端手势库hammer.js
- 移动端手势事件 hammer.JS插件
- js hammer移动端web手势放大图片
- 使用hammer.js实现移动端webAPP手势滑动切换页面
- Hammer.js 移动设备触摸手势js库
- 移动开发框架剖析(二) Hammer专业的手势控制
- 移动开发框架剖析(一) Hammer专业的手势控制
- Hammer.js——移动设备触摸手势
- Hammer.js 手势事件
- hammer.js手势
- hammer.js 手势操作
- 移动端JQ插件hammer使用详解
- hammer.js移动端触摸事件
- 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库
- 关于手机端手势js库的选择:hammer.js
- hammer.js手势处理文档
- 图片手势放大+hammer.js
- js_输出固定时间格式
- js_sumbit&onsubmit
- 文章标题 高桥和低桥
- web_HTTP协议的提交方式
- VS配色及换肤
- 移动端手势hammer
- SQL SERVER 筛选时区分大小写的语法
- Java_util_读写XML
- Java_util_获得操作系统信息
- sublime text注册码(秘钥)
- c语言复制数组的函数
- Java_util_加密解密字符串
- IM收发消息问题
- java_通过Servlet 将服务器硬盘图片展示到浏览器