使用Hammer.js操作svg

来源：互联网发布：qq封号软件编辑：程序博客网时间：2024/04/25 07:27

hammer.js 是一个支持多手势操作的库，可以绑定dom元素，同时监听单击、双击、放缩、长按、滑动、旋转等事件。

官网地址： https://hammerjs.github.io/

在我参与的某个项目开发中，需要实现对svg图形的绘制以及各种手势操作的监听，使用 hammer.js 很大程度的提高了开发的效率。

简单的拖动dom示例代码如下：

<!DOCTYPE html><html><head>    <title>hammer.js操作svg</title>    <meta charset="utf-8">    <script type="text/javascript" src="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;        }    }); </script></body></html>

效果如下图所示：

自由拖动效果

示例下载：点击这里

0 0