hammer.js是轻量的手势库包,网上都有一些介绍,只不过有点少而已,还是能搜的到的,
先做一个简单的平移,然后参考文档,应该就能明白怎么使用的了;
<!DOCTYPE html> <html> <head> <title>hammer.js操作svg-移动</title> <meta charset="utf-8"> <script type="text/javascript" src="../js/hammer.js"></script> </head> <body> <svg id="svg" width="800" height="400" style="background: #f0f0f0;"> <circle id="circle" fill="red" r="50" cx="100" cy="100"></circle> </svg> <script type="text/javascript"> var circle = document.getElementById("circle"); //通过id获取要绑定的元素 var circleHammer = new Hammer(circle); //实例化 var circleX = 0; //用于保存移动之前的坐标 var circleY = 0; var moveX = 0; //记录移动时的坐标 var moveY = 0; circleHammer.on("panstart panmove panend", function(ev){ switch(ev.type){ case "panstart": circleX = parseInt(circle.getAttribute("cx")); circleY = parseInt(circle.getAttribute("cy")); circle.setAttribute("fill","brown"); break; case "panmove": moveX = ev.deltaX + circleX; //ev.deltaX的值是X坐标上移动的值,加上移动之前的坐标值,即为当前的坐标值 moveY = ev.deltaY + circleY; circle.setAttribute("cx",moveX); circle.setAttribute("cy",moveY); break; case "panend": circle.setAttribute("fill","red"); break; } }); /*Pinch事件:在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件。该事件事以分别对以下事件进行监听并处理: Pinchstart:多点触控开始、Pinchmove:多点触控过程、Pinchend:多点触控结束、Pinchcancel:多点触控取消、Pinchin:多点触控时两手指距离越来越近、Pinchout:多点触控时两手指距离越来越远*/ /*两个手指操作*/
circleHammer.on("pinchin",function (ev) {switch(ev.type){ case "panstart": alert("1111111111"); break; case "panmove":alert("222222222221");
break; case "panend":alert("333333333333");
break;case "pinchin":
alert("44444444");break; }}) 上面这个事件中你会发现只出来4444444;这下你大概明白了吧,
所以平移缩放可以这样做:
hammertime.on("pinchin pinchout panstart panmove panend", function (ev) { switch (ev.type) { case "pinchin": zoom(ev.scale); break; case "pinchout": zoom(ev.scale); break; case "panstart": circleX = parseInt(circle.getAttribute("cx")); circleY = parseInt(circle.getAttribute("cy")); circle.setAttribute("fill","brown"); break; case "panmove": moveX = ev.deltaX + circleX; //ev.deltaX的值是X坐标上移动的值,加上移动之前的坐标值,即为当前的坐标值 moveY = ev.deltaY + circleY; circle.setAttribute("cx",moveX); circle.setAttribute("cy",moveY); break; case "panend": circle.setAttribute("fill","red"); break; } });
</script> </body> </html>
我的完整demo http://download.csdn/download/qq_25909453/10154046
更多推荐
hammer.js操作svg使达到平移,缩放
发布评论