对这个svg手势操作(放大,缩小)

断了今生、忘了曾经 提交于 2019-12-07 23:56:58

在上一章中讲到的,我发现在使用过程中出现一些问题,他并不能对真个svg进行操作,只能对svg里面的元素进行操作,

要想操作整个svg,你得知道有哪些属性,网上都有一些简单的介绍,我在这里只说怎么解决,

svg里有一个viewBox 的元素,你修改他你会发现一些东西,viewBox = 0 0 400 400 ;

相当于这个svg的画布只有400; 

viewBoxValues = svg.getAttribute('viewBox').split('');

修改viewBoxValues[0] viewBoxValues[1] 变能移动,viewBoxValues[3]变能缩放

  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":
                viewBoxValues = svg.getAttribute('viewBox').split(" ");
                circleX = parseInt(viewBoxValues[0]);
                circleY = parseInt(viewBoxValues[1]);
//                circle.setAttribute("fill","brown");
                break;
            case "panmove":
                viewBoxValues[0] = circleX -ev.deltaX ;  //ev.deltaX的值是X坐标上移动的值,加上移动之前的坐标值,即为当前的坐标值
                viewBoxValues[1] =circleY - ev.deltaY;

                svg.setAttribute("viewBox",viewBoxValues.join(" "));
//                svg.setAttribute("y",moveY);
                break;
            case "panend":
//                circle.setAttribute("fill","red");
                break;
        }
    });
    /**
     * svg放缩
     * {Float} num 放缩的倍数
     */
    var boxWidth = viewBoxValues[2];
    var boxHeight = viewBoxValues[2];
    function zoom(num) {

                viewBoxValues[2] =boxWidth /num;

        svg.setAttribute("viewBox",viewBoxValues.join(" "));
    }

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!