hammer.js操作svg使达到平移，缩放

最新推荐文章于 2024-03-17 09:44:22 发布

那年我七岁

最新推荐文章于 2024-03-17 09:44:22 发布

阅读量1.8k

点赞数

分类专栏： html5 问题未解决文章标签： svg hammer.js

本文链接：https://blog.csdn.net/qq_25909453/article/details/78773168

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

问题未解决

1 篇文章 0 订阅

订阅专栏

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.net/download/qq_25909453/10154046

那年我七岁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
hammer.js操作svg使达到平移，缩放

hammer.js是轻量的手势库包，网上都有一些介绍，只不过有点少而已，还是能搜的到的，先做一个简单的平移，然后参考文档，应该就能明白怎么使用的了；html>html>head> title>hammer.js操作svg-移动title> meta charset="utf-8"> script type="text/javascript" src="../
复制链接

扫一扫