js操作svg旋转

在我的某个项目开发中,需要监听对一些svg图形的手势操作旋转事件,然而使用hammer.js监听手势进行旋转并不理想。默认旋转和放缩事件都是监听的双指操作,如果想要单纯地进行旋转而不放缩,这样显然很不好,如果只监听一个手指做画圆动作来进行旋转,因为弧度的问题,很难掌握平稳的旋转速率,进而不能精确的控制想旋转的角度,所以这里单独抽出旋转事件,以一个刻度尺上小组件的单方向移动来平稳的控制旋转,下面用模型简单演示一下。

js操作svg旋转_第1张图片

下面是代码:


<html>
<head>
  <meta charset="utf-8">
  <title>js操作svg旋转title>
  <style type="text/css">
  html,body{
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none;
    user-select: none; 
  }
  style>
head>
<body>
 <svg id="svg" width="800" height="600">
     <g transform="translate(40,80)">
        <rect id="rotate" x="20" y="20" width="100" height="60" fill="red">rect>
     g>
    <g transform="translate(300,-60)">
        <g>
            <rect x="100" y="100" width="20" height="380" fill="lightgray" >rect>
            <line x1="50" y1="110" x2="70" y2="110" stroke="black">line>
            <text x="30" y="115" font-size="12px">text>
            <line x1="60" y1="200" x2="70" y2="200" stroke="black">line>
            <text x="25" y="205" font-size="12px">90°text>
            <line x1="55" y1="290" x2="70" y2="290" stroke="black">line>
            <text x="20" y="295" font-size="12px">180°text>
            <line x1="60" y1="380" x2="70" y2="380" stroke="black">line>
            <text x="20" y="385" font-size="12px">270°text>
            <line x1="55" y1="470" x2="70" y2="470" stroke="black">line>
            <text x="20" y="475" font-size="12px">360°text>
        g>
        <g>
            <rect id="rect" x="90" y="100" width="40" height="20" fill="white" stroke="gray">
            rect>
        g>
    g>
 svg>
 <script type="text/javascript">
    var rotate = document.getElementById("rotate");
    var rect = document.getElementById("rect");
    var body = document.body;
    var drag = false;
    var tmpY = 0;
    var mouseY = 0;
    var newPos = 0;
    var realAngle = 0;

    bindEventListener(rect,"mousedown",eventHandler);
    bindEventListener(body,"mousemove",eventHandler);
    bindEventListener(body,"mouseup",eventHandler);

    function bindEventListener(dom,type,func){
        if(dom.addEventListener) { 
            dom.addEventListener(type,func, false); 
        } else if (dom.attachEvent) { 
            dom.attachEvent("on" + type, func); 
        } else { 
            dom["on" + type] = func; 
        } 
    }

    function eventHandler(event){
        event = event || window.event;
        switch(event.type){
            case "mousedown":
                if(event.target.id==rect.id){
                    drag = true;
                    tmpY = parseInt(event.target.getAttribute("y"));
                    mouseY = event.clientY;
                }
                break;
            case "mousemove":
                if(!drag) return;

                newPos = tmpY+event.clientY-mouseY;

                if(newPos<105){
                    newPos = 100;
                }else if(Math.abs(newPos-190)<5){
                    newPos = 190;
                }else if(Math.abs(newPos-280)<5){
                    newPos = 280;
                }else if(Math.abs(newPos-370)<5){
                    newPos = 370;
                }else if(newPos>458){
                    newPos = 460;
                }
                rect.setAttribute("y",newPos);
                realAngle = newPos-100
                rotate.setAttribute("transform","rotate("+realAngle+" 70,50)");
                break;
            case "mouseup":
                drag = false;
                break;
        }
    }
 script>
body>


html>

你可能感兴趣的:(javascript)