svg 贝塞尔 钢笔拖动 支持火狐IE6

2010-03-27 seven_ing

1,转载注明出处 2,实现简单仅供参考 3,只作为自己兴趣和总结 4,功能尚未完全实现可能有bug   5,几年前所写不提供解答

bezier.html ———————————————————————————————————————

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
  <head>
    <title>Bezier=============================================================</title>
 
    <meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
    <meta http-equiv=”description” content=”this is my page”>
    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
   
    <!–<link rel=”stylesheet” type=”text/css” href=”./styles.css”>–>
   <script src=”./bezier.js” type=”text/JavaScript”></script>
   <script src=”./bezier1.js” type=”text/JavaScript”></script>
  </head>
 
  <body>
         <!– bezier曲线–>
      <embed style=”margin:0px;width:1010px; height:560px;”  type=”image/svg-xml” id=”svgmapctrl”
      src=”bezier.svg” wmode=”transparent”>
    </embed>
  </body>
</html>

bezier.js ———————————————————————————————————————

 var svgdoc;
 var svgroot;
 var newline;
 var newpath;
 var newc1,newline1; //操作线1 操作圆1
 var newc2,newline2; //操作线2 操作圆2
 
 var posx;
 var posy;
 var posmin=50;
 var drawing;
 var linecol=”#000″;
 var linewidth=”1px”;
 var ISMOVE = false; //是否按下  按下可操作
 var svgns=”http://www.w3.org/2000/svg“;
 
 //移动曲线相关
  var dragger = null;
  var origTransform = “”;
  var oldX;
  var oldY;
  var origX;
  var origY;
  var oldTranslateX;
  var oldTranslateY;
  var OX2;
  var OY2;
 
  //记住path路径
  var mx ;
  var my ;
  var endx ;
  var endy ;
      function initBezier(load_evt)
      {
        svgdoc=load_evt.target.ownerDocument;
        svgroot=svgdoc.rootElement;
        drawing=svgdoc.getElementById(“drawing”);
        svgroot.addEventListener(“mouseover”,MouseOver,false);
        svgroot.addEventListener(“mousedown”,MouseDown,false);
        svgroot.addEventListener(“mousemove”,MouseMove,false);
        svgroot.addEventListener(“mouseup”,MouseUp,false);
        svgroot.addEventListener(“mouseout”,MouseOut,false);
      }
      function MouseOver(mouseover_event)
      {
        var obj = mouseover_event.target;
         if( obj.getAttribute(“id”) == “c1″ || obj.getAttribute(“id”) == “c2″)
         {
       obj.getStyle().setProperty(“opacity”, “0.8″);
      }
      }
      function MouseDown(evt)
      {
         var obj = evt.target;
         var biztypeName = evt.target.parentNode.getAttribute(“biztype”);//图例类
         if(biztypeName!=”legend”){
     if( obj.getAttribute(“id”) == “c1″ || obj.getAttribute(“id”) == “c2″)
     {
       dragger = obj;
       //oldX = Math.abs(dragger.getAttribute(“cx”)); 
       //oldY = Math.abs(dragger.getAttribute(“cy”));
       //origX = evt.getClientX();
       //origY = evt.getClientY();
       //oldTranslateX = 0;
       //oldTranslateY = 0;
     }else{
     Coords(evt);//边界修订
           mx = posx;
           my = posy;
           newpath=svgdoc.createElement(“path”);//———————-bezierCurve
          newpath.setAttribute(“id”,”bezierCurve”);
          newpath.setAttribute(“d”,”M”+mx+”,”+my+” “+evt.clientX+”,”+evt.clientY+”");
           ISMOVE=true;
     }
    }
      }
      function MouseMove(evt)
      {
        if(ISMOVE&&dragger==null){
           Coords(evt);
         newpath.setAttribute(“d”,”M”+mx+”,”+my+” “+evt.clientX+”,”+evt.clientY+”");
         newpath.setAttribute(“fill”,”none”);
         newpath.setAttribute(“stroke”,linecol);
         newpath.setAttribute(“stroke-width”,linewidth);
         drawing.appendChild(newpath);//——————————添加钢笔工具集成(包含一个path 和两个  手柄控制)
       }else if(dragger!=null){
          dragger.getStyle().setProperty(“opacity”, “0.75″);
    var curve = getSVGDocument(evt.target).getElementById(“bezierCurve”);
    if( dragger.getAttribute(“id”) == “c1″ ){
      var line1 = svgdoc.getElementById(“line1″);
      var line2 = svgdoc.getElementById(“line2″);
      line1.setAttribute(“x1″,  2*mx – evt.clientX);
      line1.setAttribute(“y1″,  2*my – evt.clientY);
      line1.setAttribute(“x2″, evt.clientX);
      line1.setAttribute(“y2″, evt.clientY);
      curve.setAttribute(“d”,  “M”+mx+”,”+my+”C” +  Math.round(line1.getAttribute(“x1″)*100)/100 + “,” +  Math.round(line1.getAttribute(“y1″)*100)/100 + ” ” +   Math.round(line2.getAttribute(“x2″)*100)/100 + “,” + Math.round(line2.getAttribute(“y2″)*100)/100 + ” “+OX2+”,”+OY2+”");
    }else if( dragger.getAttribute(“id”) == “c2″ ){
      var line1 = svgdoc.getElementById(“line1″);
      var line2 = svgdoc.getElementById(“line2″);
      line2.setAttribute(“x1″,  2*OX2 – evt.clientX);
      line2.setAttribute(“y1″,  2*OY2 – evt.clientY);
      line2.setAttribute(“x2″, evt.clientX);
      line2.setAttribute(“y2″, evt.clientY);
      curve.setAttribute(“d”,  “M”+mx+”,”+my+”C” +  Math.round(line2.getAttribute(“x1″)*100)/100 + “,” +  Math.round(line2.getAttribute(“y1″)*100)/100 + ” ” +   Math.round(line1.getAttribute(“x2″)*100)/100 + “,” + Math.round(line1.getAttribute(“y2″)*100)/100 + ” “+OX2+”,”+OY2+”");
         }
          dragger.setAttribute(“cx”, evt.clientX);
      dragger.setAttribute(“cy”, evt.clientY);
       }
     }
      function MouseUp(evt)
      {
       if(ISMOVE&&dragger==null){
         newline1=svgdoc.createElement(“line”);//———————-line1
        newline1.setAttribute(“id”,”line1″);
        newline1.setAttribute(“x1″,mx);
        newline1.setAttribute(“y1″,my);
        newline1.setAttribute(“x2″,mx);
        newline1.setAttribute(“y2″,my);
         newline1.setAttribute(“stroke”,linecol);
         newline1.setAttribute(“stroke-width”,1);
 
        newline2=svgdoc.createElement(“line”);//———————-line2
        newline2.setAttribute(“id”,”line2″);
        newline2.setAttribute(“x1″,evt.clientX);
        newline2.setAttribute(“y1″,evt.clientY);
        newline2.setAttribute(“x2″,evt.clientX);
        newline2.setAttribute(“y2″,evt.clientY);
         newline2.setAttribute(“stroke”,linecol);
         newline2.setAttribute(“stroke-width”,1);
        
        newc1=svgdoc.createElement(“circle”);//———————-c1
        newc1.setAttribute(“id”,”c1″);
        newc1.setAttribute(“cx”,parseInt(mx));
        newc1.setAttribute(“cy”,parseInt(my));
        newc1.setAttribute(“r”,3);
         newc1.setAttribute(“transform”,”translate(0 0)”);
         newc1.setAttribute(“fill”,”black”);
         newc1.setAttribute(“stroke”,”#F66″);
         newc1.setAttribute(“stroke-width”,0.6);
         newc1.setAttribute(“opacity”,0.3);
        
         newc2=svgdoc.createElement(“circle”);//———————-c2
        newc2.setAttribute(“id”,”c2″);
        newc2.setAttribute(“cx”,evt.clientX);
        newc2.setAttribute(“cy”,evt.clientY);
        newc2.setAttribute(“r”,3);
         newc2.setAttribute(“transform”,”translate(0 0)”);
         newc2.setAttribute(“fill”,”black”);
         newc2.setAttribute(“stroke”,”#F66″);
         newc2.setAttribute(“stroke-width”,0.6);
         newc2.setAttribute(“opacity”,0.3);
         OX2 = evt.clientX;
         OY2 = evt.clientY;
        
         drawing.appendChild(newline1);
         drawing.appendChild(newline2);
         drawing.appendChild(newc1);
         drawing.appendChild(newc2);
     }
        //currNode.removeChild(this.currNode)
        ISMOVE=false;
        dragger=null;
       
      } 
     
     
      function MouseOut(evt)
  {
    var onObject = evt.getTarget();
    if( onObject.getAttribute(“id”) == “c1″ || onObject.getAttribute(“id”) == “c2″)
    {
    onObject.getStyle().setProperty(“opacity”, “0.3″);
    }
 
  }
     
     
      //边界限定
      function Coords(mouse_event)
      {
        posx=mouse_event.clientX;
        posy=mouse_event.clientY;
        if(posx<posmin)posx=posmin;
        if(posy<posmin)posy=posmin;
        if(posx>640+posmin)posx=640+posmin;
        if(posy>480+posmin)posy=480+posmin;
      }
      function SetLineColor(mousedown_event)
      { 
       linecol= mousedown_event.target.style.getPropertyValue(“fill”);

        svgdoc.getElementById(“aktline”).style.setProperty(“stroke”,linecol,”");
      }
      function SetLineWidth(mousedown_event)
      {
        linewidth=mousedown_event.target.style.getPropertyValue(“stroke-width”);
        svgdoc.getElementById(“aktline”).style.setProperty(“stroke-width”,linewidth,”");
      }
      
      

bezier.svg ———————————————————————————————————————

<?xml version=”2.0″ encoding=”utf-8″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”  “http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd” [
  <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">]>
 
 
<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink“  zoomAndPan=”enable” onload=”initBezier(evt)”>
  <title>SVG</title>
  <desc>svg</desc>
  <defs>SVG</defs>
 
 
  <text x=”70″ y=”30″ style=”fill: #000; font-size: 24px”>XiaoDuan Copyleft 2009.10.17 – xiaoduan v.3</text>
 
 
 
  <rect x=”180″ y=”80″ width=”640″ height=”480″ rx=”5″ ry=”5″ style=”fill:#FFF; stroke:#000″/>
 
  <!–图例  控制画笔属性–>
  <g biztype=”legend” x=”d” onmousedown=”SetLineColor(evt)”>
    <rect biztype=”legend” x=”30″ y=”60″ width=”10″ height=”10″
      style=”fill:#FF0; stroke:#000″/>
    <rect x=”30″ y=”80″ width=”10″ height=”10″
      style=”fill: #F00; stroke: #000″/>
    <rect x=”30″ y=”100″ width=”10″ height=”10″
      style=”fill: #090; stroke: #000″/>
    <rect x=”30″ y=”120″ width=”10″ height=”10″
      style=”fill: #00C; stroke: #000″/>
    <rect x=”30″ y=”140″ width=”10″ height=”10″
      style=”fill: #000; stroke: #000″/>
  </g>
  <g  biztype=”legend”  onmousedown=”SetLineWidth(evt)”>
    <line x1=”30″ y1=”180″ x2=”40″ y2=”180″
      style=”stroke: #000; stroke-width: 1px”/>
    <line x1=”30″ y1=”200″ x2=”40″ y2=”200″
      style=”stroke: #000; stroke-width: 2px”/>
    <line x1=”30″ y1=”220″ x2=”40″ y2=”220″
      style=”stroke: #000; stroke-width: 3px”/>
    <line x1=”30″ y1=”240″ x2=”40″ y2=”240″
      style=”stroke: #000; stroke-width: 4px”/>
    <line x1=”30″ y1=”260″ x2=”40″ y2=”260″
      style=”stroke: #000; stroke-width: 5px”/>
  </g>
  <!–end–>
 
  <line id=”aktline” x1=”18″ y1=”58″ x2=”18″ y2=”262″   style=”stroke: #000; stroke-width: 1px”/>
   
   
   
   
   
   
   
  <!– 画出的图形 –>
  <g id=”drawing”></g>
 
 
 
</g>
 
 
 
</svg>

bezier1.js ———————————————————————————————————————

 var dragger = null;
 var origTransform = “”;
 var oldX;
 var oldY;
 var origX;
 var origY;
 var oldTranslateX;
 var oldTranslateY;
   
 function DoOnLoad(evt)
 {
  var el = getSVGDocument(evt.getTarget()).getElementById(“pointOne”);
  el.getStyle().setProperty(“fill”, “black”);
 }

 function DoOnMouseOver(evt)
 {
  var onObject = evt.getTarget();
  if( onObject.getAttribute(“id”) == “pointOne” || onObject.getAttribute(“id”) == “pointTwo”)
  {
    onObject.getStyle().setProperty(“opacity”, “0.5″);
  }
 }
 function DoOnMouseOut(evt)
 {
  var onObject = evt.getTarget();
  if( onObject.getAttribute(“id”) == “pointOne” || onObject.getAttribute(“id”) == “pointTwo”)
  {
  onObject.getStyle().setProperty(“opacity”, “0.3″);
  }

 }
 function DoOnMouseDown(evt)
 {

  var onObject = evt.getTarget();
  if( onObject.getAttribute(“id”) == “pointOne” || onObject.getAttribute(“id”) == “pointTwo”)
  {
   dragger = onObject;
   oldX = Math.abs(dragger.getAttribute(“cx”)); 
   oldY = Math.abs(dragger.getAttribute(“cy”));
   origX = evt.getClientX();
   origY = evt.getClientY();
   oldTranslateX = 0;
   oldTranslateY = 0;
  }
 }

 function DoOnMouseMove(evt)
 {
    if( dragger != null )
    {
    dragger.getStyle().setProperty(“opacity”, “0.75″);
  
    var newX = Math.max(Math.min((oldX + (evt.getClientX() – origX) * 0.004),1),0);
    var newY = Math.max(Math.min((oldY + (evt.getClientY() – origY) *-0.004),1),0);
    var curve = getSVGDocument(evt.getTarget()).getElementById(“kSpline”);
    if( dragger.getAttribute(“id”) == “pointOne” )
    {
     var other = getSVGDocument(evt.getTarget()).getElementById(“pointTwo”);
     var cLine1 = getSVGDocument(evt.getTarget()).getElementById(“cL1″);
     var curX2 = other.getAttribute(“cx”);
     var curY2 = other.getAttribute(“cy”);
     var transformT = “keySplines=\”" +  Math.round(newX*100)/100 + ” ” + Math.round(newY*100)/100 + “  ” +
           Math.round(curX2*100)/100 + ” ” + Math.round(curY2*100)/100 + “\”";
  
     curve.setAttribute(“d”, “M0,0C” +  newX + “,” + newY + ” ” +   curX2 + “,” + curY2 + ” 1,1″);
     cLine1.setAttribute(“x2″, newX);
     cLine1.setAttribute(“y2″, newY);
    }
    else
    {
     var other = getSVGDocument(evt.getTarget()).getElementById(“pointOne”);
     var cLine2 = getSVGDocument(evt.getTarget()).getElementById(“cL2″);
     var curX1 = other.getAttribute(“cx”);
     var curY1 = other.getAttribute(“cy”);
     var transformT = “keySplines=\”" +
       Math.round(curX1*100)/100 + ” ” + Math.round(curY1*100)/100 + “  ” +
       Math.round(newX*100)/100 + ” ” + Math.round(newY*100)/100 + “\”";
  
     curve.setAttribute(“d”, “M0,0C” +
       curX1 + “,” + curY1 + ” ” + 
       newX + “,” + newY + ” 1,1″);
     cLine2.setAttribute(“x2″, newX);
     cLine2.setAttribute(“y2″, newY);
  }

  var coordsText = getSVGDocument(evt.getTarget()).getElementById(“coords”);
  coordsText.getFirstChild().setData(transformT);
   
  dragger.setAttribute(“cx”, newX);
  dragger.setAttribute(“cy”, newY);

    }
 }
 function DoOnMouseUp(evt)
 {
  if( dragger != null )
  {
   dragger.getStyle().setProperty(“opacity”, “0.3″);
   dragger = null;
   origTransform = “”
   oldX = 0;
   oldY = 0;
   origX = 0;
   origY = 0;
   oldTranslateX = 0;
   oldTranslateY = 0;
  }
 }
 function getSVGDocument(node)
 {
  if( node.getNodeType() != 9 )
   return node.getOwnerDocument();
  else
   return node;
 }

 ———————————————————————————————————————

svg+js+path遇其它图形path的各种变化

2008-08-21 seven_ing

<svg width="800" height="800" >
 <script><![CDATA[                    
      var SVGDocument = null;  
      var SVGRoot = null;
      var TrueCoords = null;
      var Point = null;
      var BackDrop = null;
      var DragTarget = null;
      var moveTarget = null; //set移动path的对象
      var dArray  = new Array(12);//定义path  d属性的数组
      var dragger = null;
      var x; //当前鼠标(坐标)
      var y;
      var X1;//起点坐标
      var Y1;
      var X2;//path  YL2坐标
      var Y2;
      var CX1; //path  C坐标
      var CY1
      var CX2;
      var CY2;
      var CX3;
      var CY3;
      var xx2;//终点感知范围
      var yy2;
      var newXx = 0;//矩阵增量
      var newYy = 0;
      var moveObject = null;//移动之后销毁源对象赋值新对象
      var ByNexu = null;   //移动时判断path与矩形相交
      var rectbus1Y ;//取得矩形的y坐标  用来判断path是否  放在不正当位置
      var rectbus3Y;
      var yUpdate ;//当前鼠标减去平移量    一边缩放感知
      var yz;  //两个矩形的中心横坐标
 function Doonmouseover(evt)  { 
   var onObject =  evt.getTarget();
      ParsePath(evt);//调用给path数组赋值的函数
         x=evt.clientX  //当前鼠标坐标
         y=evt.clientY 
         X1 =  parseFloat(dArray[0]) ;   //起始坐标
        Y1 =  parseFloat(dArray[1]) ;
       X2 =  parseFloat(dArray[10]) ;  //终点坐标(L2坐标)
        Y2 =  parseFloat(dArray[11]) ;
        XL1 =  parseFloat(dArray[2]) ;  //path  L1坐标
   YL1 =  parseFloat(dArray[3]) ;
         CX1 =  parseFloat(dArray[4]) ;  //path  C坐标
         CY1 =  parseFloat(dArray[5]) ;
         CX2 =  parseFloat(dArray[6]) ;
         CY2 =  parseFloat(dArray[7]) ;
         CX3 =  parseFloat(dArray[8]) ;
         CY3 =  parseFloat(dArray[9]) ;
        
  if(moveObject!=null){//是否在移动之后感知
         xx2 = Math.abs(X2-(x-newXx));
   yy2 = Math.abs(Y2-(y-newYy));
   }
   else{
         xx2 = Math.abs(X2-x);
   yy2 = Math.abs(Y2-y);
  }
  if(((xx2<8)&&(yy2<8)))
    { 
     onObject.getStyle().setProperty("cursor", "n-resize");
   }
   else
   {
   onObject.getStyle().setProperty("cursor", "hand");
      }
     
     }
 function Donload(evt) {
   
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
      TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
      BackDrop = SVGDocument.getElementById("BackDrop");
   
      }

 function Donmousedown(evt)
      {
   var onObject =  evt.getTarget();
         if ( BackDrop != onObject )
          {
             if(((xx2<6)&&(yy2<6)))
      {
   dragger = onObject ; //从新定义对象以便于拖动
         dragger.getStyle().setProperty("cursor", "n-resize");  
           }
            else{
            DragTarget = onObject.parentNode ;//按下父节点可以整体拖动
   moveTarget = onObject;     //path拖动变形自己的对象
         DragTarget .getStyle().setProperty("cursor", "move"); 
            DragTarget.parentNode.appendChild( DragTarget );
            DragTarget.setAttribute( "pointer-events", "none");
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x – Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y – Number(transMatrix.f);
         }
      }
       }

 function Donmousemove(evt)  {
  
      yUpdate = y-newYy;  //把path坐标完全转化为原始坐标
      ByNexus(evt);
  if(dragger!=null)
  { 
            x=evt.clientX;
            y=evt.clientY; 
           
      if((xx2<8)&&(yy2<8))
   { 
   dragger.getStyle().setProperty("cursor", "n-resize"); 
     if(ByNexu!=null){ 
            dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+yUpdate);  //把曲线全部赋值成L1的坐标
       }
     else{
      var a = XL1+parseFloat(6.5000000);  //当你判断画直线后 用XL1把曲线赋值之后CX1…CX6坐标已经变成  XL1  YL1   必须要计算回来
      var b = YL1+parseFloat(0.0000000);
      var c = XL1+parseFloat(6.5000000);
      var d = YL1+parseFloat(13.0000000);
      var e = XL1+parseFloat(0.000000);
      var f = YL1+parseFloat(13.0000000);
      dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+yUpdate);  
    }   
         }
    }
  else
  {
   GetTrueCoords(evt);
    if (DragTarget)
    {    
    var newX = TrueCoords.x – GrabPoint.x;
    var newY = TrueCoords.y – GrabPoint.y;
    DragTarget.setAttribute( "transform", "translate(" + newX + ")");
    newXx = newX;
       newYy = newY;
        ByNexus(evt);
       if((ByNexu!=null)||(Y2<yz)){  //如果不在矩形范围内  或者小于两个矩形Y数值的中间点   就画直线
      moveTarget.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+Y2);   ByNexu = null; 
       }
       else{  //出去if的要求   都画弧
            var a = XL1+parseFloat(6.5000000);//当你判断画直线后 用XL1把曲线赋值之后CX1…CX6坐标已经变成  XL1  YL1   必须要计算回来
      var b = YL1+parseFloat(0.0000000);
      var c = XL1+parseFloat(6.5000000);
      var d = YL1+parseFloat(13.0000000);
         var e = XL1+parseFloat(0.000000);
      var f = YL1+parseFloat(13.0000000);
      moveTarget.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+Y2);   ByNexu = null;
     
    }
         }
     }   
      }
 function Donmouseup(evt) {
  if(dragger != null){
        yz =  parseInt(rectbus1Y)+parseInt((rectbus3Y-rectbus1Y)/2); //两个矩形的中心线横坐标  
    if(ByNexu!=null)
        {
     if(yUpdate<yz){
       dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+XL1+","+YL1); dragger = null; //把曲线全部赋值成L1的坐标 
     }
     if(yUpdate>yz){
       dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+rectbus3Y); dragger = null; //把曲线全部赋值成L1的坐标
     } 
        }              
    else{
               var a = XL1+parseFloat(6.5000000);  //当你判断画直线后 用XL1把曲线赋值之后CX1…CX6坐标已经变成  XL1  YL1   必须要计算回来
      var b = YL1+parseFloat(0.0000000);
      var c = XL1+parseFloat(6.5000000);
      var d = YL1+parseFloat(13.0000000);
      var e = XL1+parseFloat(0.000000);
      var f = YL1+parseFloat(13.0000000);  
            if(yUpdate<yz){
       dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+XL1+","+YL1);dragger = null;   //把曲线全部赋值成L1的坐标
             }
               if(yUpdate>yz){ 
                  dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+rectbus3Y); dragger = null;//把曲线全部赋值成L1的坐标
       }
    }
   }
  ByNexu = null; 
  if (DragTarget)
         {
              var targetElement = evt.target;
            DragTarget.setAttributeNS(null, "pointer-events", "all");
            if ( "Folder" == targetElement.parentNode.id )
            {
               targetElement.parentNode.appendChild( DragTarget);
            }
           moveObject = DragTarget;//如果拖动后赋值给全局新对象以便在over里判断
           DragTarget = null;    //把原对象赋值为空
           moveTarget = null;
         }
     }

 function GetTrueCoords(evt)//矩阵的移动 在onmousemove函数中应用
      {
         var newScale = SVGRoot.currentScale;//得到原始坐标无论你是否平移过都得到原始坐标,根据原始坐标的平移
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX – translation.x)/newScale;
         TrueCoords.y = (evt.clientY – translation.y)/newScale;
      }
 function ParsePath(evt)//获取当前path的路径(数字)
   {
   var onObject =  evt.getTarget();
     var d = onObject.getAttribute("d");//得到Path属性的d数值
      var regex=new RegExp("[ ,]");//定义空格和","
     var arr=d.split(regex);      //去掉空格和","
     var regex1=new RegExp("[a-zA-Z]"); //定义字母
     for( var i=0;i<arr.length;i++)     //遍历所有字符串
    {
    var s=arr[i].replace(regex1,"");//去掉字母
    dArray[i] =  s;//给数组进行赋值 
     }
    }
  function ByNexus(evt){    //检验path与rect的关系
                                 //rects = svgRoot.getElementByTavName("rect"); //根据图形的形状得到所需图形  此方法未用到       
   //取得矩形的横坐标
   svgDoc = evt.target.ownerDocument;
   svgRoot = svgDoc.rootElement;
   var rect1 = svgRoot.getElementById("bus1");//根据id得到所需图形
  
      var rectbus1Width = rect1.getAttribute("width");//得到宽度
   var rectbus1X1 =  rect1.getAttribute("x");//得到rect两端的x坐标
   rectbus1Y =  rect1.getAttribute("y");//得到rect两端的y坐标
   var rectbus1X2 = parseFloat(rectbus1X1)+parseFloat(rectbus1Width);//得到末端坐标
  
   var rect2 = svgRoot.getElementById("bus2");
   var rectbus2Width2 = rect2.getAttribute("width");
   var rectbus2X1 =  rect2.getAttribute("x");//得到rect两端的x坐标
   var rectbus2X2 = parseFloat(rectbus2X1)+parseFloat(rectbus2Width2);
  
   var rect3 = svgRoot.getElementById("bus3");
   rectbus3Y =  rect3.getAttribute("y");//得到rect两端的y坐标
  
   var xxx = X1+newXx;                  //当前直线坐标
  
   if((rectbus1X1>xxx)||((rectbus1X2<xxx)&&(rectbus2X1>xxx))||(rectbus2X2<xxx))
    { 
    ByNexu = "NOnull"; //path与rect关系
    } 
  
  }
]]></script>
          <g>
             <rect onmousemove="Donmousemove(evt)" onmouseup="Donmouseup(evt)" id="BackDrop" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all"/>
   </g>
      <g x="67" width="154" y="121" height="10" id="bus1" biztype="bus1" >
    <rect x="65" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class7_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
    <g x="217" width="85" y="119" text="$名称" height="13" id="Class7_Text21">
     <text x="217" fill="#000000" y="128" font-size="11" font-family="SimSun">洪沟500KVI母线</text>
    </g>
   </g>
   <g x="400" width="154" y="120" height="10" id="bus2" biztype="bus2">
    <rect x="400" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class2_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
    <g x="550" width="91" y="118" text="$名称" height="13" id="Class2_Text21">
     <text x="550" fill="#000000" y="127" font-size="11" font-family="SimSun">洪沟500KVII母线</text>
    </g>
   </g>
   <g x="65" width="154" y="240" height="10" id="bus3" biztype="bus3">
    <rect x="65" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class9_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
    <g x="215" width="85" y="238" text="$名称" height="13" id="Class9_Text20">
     <text x="215" fill="#000000" y="247" font-size="11" font-family="SimSun">洪沟220KVI母线</text>
    </g>
   </g>
   <g x="402" width="154" y="241" height="10" id="53" biztype="bus4">
    <rect x="400" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class10_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
       <g x="552" width="91" y="239" text="$名称" height="13" id="Class10_Text20">
     <text x="552" fill="#000000" y="248" font-size="11" font-family="SimSun">洪沟220KVII母线</text>
    </g>
   </g>
   <g  x="402" width="154" y="241" height="10" id="1" biztype="bus1">
       <path onload="Donload(evt)"   onmouseover="Doonmouseover(evt)" onmousedown="Donmousedown(evt)" fill="#FFFFFF" d="M89.833336 0,L89.833336 118.0 C96.333336 118.0 96.333336 131.0 89.833336 131.0,L89.833336 240.0" id="line1" biztype="line" stroke="#000000"/>
       <g text="$名称">
           <text x="94.833336" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;">TestNa</text>
       </g>
   </g>
   <g  x="460" width="154" y="300" height="10" id="2" biztype="bus2">
       <path  onload="Donload(evt)"   onmouseover="Doonmouseover(evt)" onmousedown="Donmousedown(evt)" fill="#FFFFFF" d="M114.66667 0,L114.66667 118.0 C121.16667 118.0 121.16667 131.0 114.66667 131.0,L114.66667 240.0" id="line2" biztype="line" stroke="#000000"/>
             <g text="名称">
                 <text x="119.66667" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;">TestNa</text>
             </g>
         </g>
       
</svg>

svg+js+path拖动缩放path和矩形有关系变形

2008-08-21 seven_ing

<svg width="800" height="800" >
 <script><![CDATA[                    
      var SVGDocument = null;  
      var SVGRoot = null;
      var TrueCoords = null;
      var Point = null;
      var BackDrop = null;
      var DragTarget = null;
      var dArray  = new Array(12);//定义path  d属性的数组
      var dragger = null;
      var x; //当前鼠标(坐标)
      var y;
      var X1;//起点坐标
      var Y1;
      var X2;//path  YL2坐标
      var Y2;
      var CX1; //path  C坐标
      var CY1
      var CX2;
      var CY2;
      var CX3;
      var CY3;
      var xx2;//终点感知范围
      var yy2;
      var newXx = 0;//矩阵增量
      var newYy = 0;
      var moveObject = null;//移动之后销毁源对象赋值新对象
      var ByNexu = null;   //移动时判断path与矩形相交
 function Doonmouseover(evt)  { 
   var onObject =  evt.getTarget();
      ParsePath(evt);//调用给path数组赋值的函数
         x=evt.clientX  //当前鼠标坐标
         y=evt.clientY 
         X1 =  parseFloat(dArray[0]) ;   //起始坐标
        Y1 =  parseFloat(dArray[1]) ;
       X2 =  parseFloat(dArray[10]) ;  //终点坐标(L2坐标)
        Y2 =  parseFloat(dArray[11]) ;
        XL1 =  parseFloat(dArray[2]) ;  //path  L1坐标
   YL1 =  parseFloat(dArray[3]) ;
         CX1 =  parseFloat(dArray[4]) ;  //path  C坐标
         CY1 =  parseFloat(dArray[5]) ;
         CX2 =  parseFloat(dArray[6]) ;
         CY2 =  parseFloat(dArray[7]) ;
         CX3 =  parseFloat(dArray[8]) ;
         CY3 =  parseFloat(dArray[9]) ;
        
  if(moveObject!=null){//是否在移动之后感知
         xx2 = Math.abs(X2-(x-newXx));
   yy2 = Math.abs(Y2-(y-newYy));
   }
   else{
         xx2 = Math.abs(X2-x);
   yy2 = Math.abs(Y2-y);
  }
  if(((xx2<8)&&(yy2<8)))
    { 
     onObject.getStyle().setProperty("cursor", "n-resize");
   }
   else
   {
   onObject.getStyle().setProperty("cursor", "hand");
      }
     
     }
 function Donload(evt) {
   
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
      TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
      BackDrop = SVGDocument.getElementById("BackDrop");
   
      }

 function Donmousedown(evt)
      {
   var onObject =  evt.getTarget();
         if ( BackDrop != onObject )
          {
             if(((xx2<6)&&(yy2<6)))
      {
   dragger = onObject ; //从新定义对象以便于拖动
         dragger.getStyle().setProperty("cursor", "n-resize");  
           }
            else{
            DragTarget = onObject ;
         DragTarget .getStyle().setProperty("cursor", "move"); 
            DragTarget.parentNode.appendChild( DragTarget );
            DragTarget.setAttributeNS(null, "pointer-events", "none");
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x – Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y – Number(transMatrix.f);
         }
      }
       }

 function Donmousemove(evt)  {
      var yUpdate = y-newYy;  //把path坐标完全转化为原始坐标
      ByNexus(evt);
  if(dragger!=null)
  { 
            x=evt.clientX;
            y=evt.clientY; 
           
      if((xx2<8)&&(yy2<8))
   {
   dragger.getStyle().setProperty("cursor", "n-resize"); 
     if(ByNexu!=null){
     dragger.setAttribute("d","M89.833336 0,L89.833336 118.0 C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+XL1+",L89.833336,"+yUpdate);  
     //dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+Y2+","+yUpdate);  
       }
   else{
     dragger.setAttribute("d","M89.833336 0,L89.833336 118.0 C96.333336 118.0 96.333336 131.0 89.833336 131.0,L89.833336,"+yUpdate); 
    }   
         }
    }
  else
  {
   GetTrueCoords(evt);
    if (DragTarget)
    {  
    var newX = TrueCoords.x – GrabPoint.x;
    var newY = TrueCoords.y – GrabPoint.y;
    DragTarget.setAttribute( "transform", "translate(" + newX + ")");
    newXx = newX;
       newYy = newY;
        ByNexus(evt);
       if(ByNexu!=null){
      DragTarget.setAttribute("d","M89.833336 0,L89.833336 118.0 C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+XL1+",L89.833336,"+Y2);  
      //dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+Y2+","+Y2);
      ByNexu = null;
       }
       else{
            DragTarget.setAttribute("d","M89.833336 0,L89.833336 118.0 C96.333336 118.0 96.333336 131.0 89.833336 131.0,L89.833336,"+Y2); 
      ByNexu = null; 
    }
         }
     }   
      }
 function Donmouseup(evt) {
  dragger = null;
  if (DragTarget)
         {
              var targetElement = evt.target;
            DragTarget.setAttributeNS(null, "pointer-events", "all");
            if ( "Folder" == targetElement.parentNode.id )
            {
               targetElement.parentNode.appendChild( DragTarget);
            }
           moveObject = DragTarget;//如果拖动后赋值给全局新对象以便在over里判断
           DragTarget = null;    //把原对象赋值为空
         }
     }

 function GetTrueCoords(evt)//矩阵的移动 在onmousemove函数中应用
      {
         var newScale = SVGRoot.currentScale;//得到原始坐标无论你是否平移过都得到原始坐标,根据原始坐标的平移
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX – translation.x)/newScale;
         TrueCoords.y = (evt.clientY – translation.y)/newScale;
      }
 function ParsePath(evt)//获取当前path的路径(数字)
   {
   var onObject =  evt.getTarget();
     var d = onObject.getAttribute("d");//得到Path属性的d数值
      var regex=new RegExp("[ ,]");//定义空格和","
     var arr=d.split(regex);      //去掉空格和","
     var regex1=new RegExp("[a-zA-Z]"); //定义字母
     for( var i=0;i<arr.length;i++)     //遍历所有字符串
    {
    var s=arr[i].replace(regex1,"");//去掉字母
    dArray[i] =  s;//给数组进行赋值 
     }
    }
  function ByNexus(evt){    //检验path与rect的关系
                                 //rects = svgRoot.getElementByTavName("rect"); //根据图形的形状得到所需图形  此方法未用到       
   //取得矩形的横坐标
   svgDoc = evt.target.ownerDocument;
   svgRoot = svgDoc.rootElement;
   var rect1 = svgRoot.getElementById("bus1");//根据id得到所需图形
  
      var rectbus1Width = rect1.getAttribute("width");
   var rectbus1X1 =  rect1.getAttribute("x");//得到rect两端的x坐标
   var rectbus1X2 = parseFloat(rectbus1X1)+parseFloat(rectbus1Width);
  
   var rect2 = svgRoot.getElementById("bus2");
   var rectbus2Width2 = rect2.getAttribute("width");
   var rectbus2X1 =  rect2.getAttribute("x");//得到rect两端的x坐标
   var rectbus2X2 = parseFloat(rectbus2X1)+parseFloat(rectbus2Width2);
  
   var xxx = X1+newXx;                  //当前直线坐标
  
   if((rectbus1X1>xxx)||((rectbus1X2<xxx)&&(rectbus2X1>xxx))||(rectbus2X2<xxx))
    { 
    ByNexu = "NOnull"; //path与rect关系
    } 
  
  }
]]></script>

   <g id="all" onmousemove="Donmousemove(evt)" onmouseup="Donmouseup(evt)">
   <g>
   <rect id="BackDrop" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all"/>
   </g>
      <g x="67" width="154" y="121" height="10" id="bus1" biztype="bus1" >
    <rect x="65" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class7_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
    <g x="217" width="85" y="119" text="$名称" height="13" id="Class7_Text21">
    <text x="217" fill="#000000" y="128" font-size="11" font-family="SimSun">洪沟500KVI母线</text>
    </g>
   </g>
   <g x="400" width="154" y="120" height="10" id="bus2" biztype="bus2">
    <rect x="400" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class2_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
    <g x="550" width="91" y="118" text="$名称" height="13" id="Class2_Text21">
    <text x="550" fill="#000000" y="127" font-size="11" font-family="SimSun">洪沟500KVII母线</text>
    </g>
   </g>
   <g x="65" width="154" y="240" height="10" id="54" biztype="bus">
    <rect x="65" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class9_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
    <g x="215" width="85" y="238" text="$名称" height="13" id="Class9_Text20">
    <text x="215" fill="#000000" y="247" font-size="11" font-family="SimSun">洪沟220KVI母线</text>
    </g>
   </g>
   <g x="402" width="154" y="241" height="10" id="53" biztype="bus">
    <rect x="400" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class10_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
       <g x="552" width="91" y="239" text="$名称" height="13" id="Class10_Text20">
    <text x="552" fill="#000000" y="248" font-size="11" font-family="SimSun">洪沟220KVII母线</text>
    </g>
   </g>
   <g onload="Donload(evt)"   onmouseover="Doonmouseover(evt)" onmousedown="Donmousedown(evt)" x="402" width="154" y="241" height="10" id="53" biztype="bus">
       <path fill="#FFFFFF" d="M89.833336 0,L89.833336 118.0 C96.333336 118.0 96.333336 131.0 89.833336 131.0,L89.833336 240.0" id="line1" biztype="line" stroke="#000000"/>
       <g text="$名称">
          <text x="94.833336" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;">TestNa</text>
       </g>
   </g>
   </g>   
</svg>

svg+js+path直线的拖动与缩放

2008-08-19 seven_ing

<svg width="800" height="800" >
 <script><![CDATA[                    
      var SVGDocument = null;  
      var SVGRoot = null;
      var TrueCoords = null;
      var Point = null;
      var BackDrop = null;
      var DragTarget = null;
      var dArray  = new Array(12);//定义path  d属性的数组
      var dragger = null;
      var x; //当前鼠标(坐标)
      var y;
      var X1;//起点坐标
      var Y1;
      var XL1;//path  L1坐标
      var YL1;
      var XL2;//path  YL2坐标
      var YL2;
      var CX1; //path  C坐标
      var CY1
      var CX2;
      var CY2;
      var CX3;
      var CY3;
      var xx1;//起点感知范围
      var yy1;
      var xx2;//终点感知范围
      var yy2;
      var newXx = 0;//矩阵增量
      var newYy = 0;
      var moveObject = null;//移动之后销毁源对象赋值新对象
  
 function Doonmouseover(evt)  {
      var onObject =  evt.getTarget();
       ParsePath(evt);//调用给path数组赋值的函数
      
         x=evt.clientX
         y=evt.clientY
 
         X1 =  dArray[0] ;   //起始坐标
        Y1 =  dArray[1] ;
       X2 =  dArray[10] ;  //终点坐标(L2坐标)
        Y2 =  dArray[11] ;
        XL1 =  dArray[2] ;  //path  L1坐标
   YL1 =  dArray[3] ;
         CX1 =  dArray[4] ;  //path  C坐标
         CY1 =  dArray[5] ;
         CX2 =  dArray[6] ;
         CY2 =  dArray[7] ;
         CX3 =  dArray[8] ;
         CY3 =  dArray[9] ;
   
  if(moveObject!=null){//是否在移动之后感知
   xx1 = Math.abs(X1-(x-newXx));
   yy1 = Math.abs(Y1-(y-newYy));
         xx2 = Math.abs(X2-(x-newXx));
   yy2 = Math.abs(Y2-(y-newYy));
   }
   else{
   xx1 = Math.abs(X1-x);
   yy1 = Math.abs(Y1-y);
         xx2 = Math.abs(X2-x);
   yy2 = Math.abs(Y2-y);
  }
  if(((xx1<4)&&(yy1<4))||((xx2<4)&&(yy2<4)))
    { 
     onObject.getStyle().setProperty("cursor", "n-resize");
   }
   else
   {
   onObject.getStyle().setProperty("cursor", "hand");
      }
     
     }
 function Donload(evt) {
   
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
      TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
      BackDrop = SVGDocument.getElementById("BackDrop");
   
      }

 function Donmousedown(evt)
      {
   var onObject =  evt.getTarget();
         if ( BackDrop != onObject )
          {
             if(((xx1<4)&&(yy1<4))||((xx2<4)&&(yy2<4)))
      {
   dragger = onObject ; //从新定义对象以便于拖动
         dragger.getStyle().setProperty("cursor", "n-resize");  
           }
            else{
            DragTarget = onObject ;
         DragTarget .getStyle().setProperty("cursor", "move"); 
            DragTarget.parentNode.appendChild( DragTarget );
            DragTarget.setAttributeNS(null, "pointer-events", "none");
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x – Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y – Number(transMatrix.f);
   
         }
      }
}

 function Donmousemove(evt)  {
        
  if(dragger!=null)
  { 
            x=evt.clientX;
            y=evt.clientY; 
            var yUpdate = y-newYy;//校正矩阵移动后的<Y>值
           
      if((xx1<4)&&(yy1<4))
   {
         dragger.getStyle().setProperty("cursor", "n-resize");
         dragger.setAttribute("d","M139.5,"+yUpdate+",L139.5 ,118.0 ,C146.0 ,118.0 ,146.0 ,131.0, 139.5, 131.0,L139.5 ,"+Y2);  
   Y1 = yUpdate;
    }  
   if((xx2<4)&&(yy2<4))
   {
   dragger.getStyle().setProperty("cursor", "n-resize");
         dragger.setAttribute("d","M139.5,"+Y1+",L139.5 ,118.0 ,C146.0 ,118.0 ,146.0 ,131.0, 139.5, 131.0,L139.5 ,"+yUpdate);
         Y2 = yUpdate;  
    }
  }
  
 else
  {
   GetTrueCoords(evt);
    if (DragTarget)
    {  
    var newX = TrueCoords.x – GrabPoint.x;
    var newY = TrueCoords.y – GrabPoint.y;
    DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + ")");
    newXx = newX;
       newYy = newY;    
         }
    }   
      }

 function Donmouseup(evt) {
  dragger = null;
  if ( DragTarget )
         {
              var targetElement = evt.target;
            DragTarget.setAttributeNS(null, "pointer-events", "all");
            if ( "Folder" == targetElement.parentNode.id )
            {
               targetElement.parentNode.appendChild( DragTarget);
            }
           moveObject = DragTarget;//如果拖动后赋值给全局新对象以便在over里判断
           DragTarget = null;    //把原对象赋值为空
         }
      }

 function GetTrueCoords(evt)//矩阵的移动应用在onmousemove里边
      {
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX – translation.x)/newScale;
         TrueCoords.y = (evt.clientY – translation.y)/newScale;
      }
 function ParsePath(evt){//获取当前path的路径
 
   var onObject =  evt.getTarget();
     var d = onObject.getAttribute("d");//得到Path属性的d数值
      var regex=new RegExp("[ ,]");
     var arr=d.split(regex);
     var regex1=new RegExp("[a-zA-Z]");
     for( var i=0;i<arr.length;i++)
    {
    var s=arr[i].replace(regex1,"");
    dArray[i] =  s;//给数组进行赋值 
     }
    }
]]></script>
 <g id="all" onmousemove="Donmousemove(evt)" onmouseup="Donmouseup(evt)">
  <g>
   <rect id="BackDrop" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all"/>
  </g>
     <g>
   <path onload="Donload(evt)"   onmouseover="Doonmouseover(evt)" onmousedown="Donmousedown(evt)" d="M139.5 50,L139.5 118.0 C146.0 118.0 146.0 131.0 139.5 131.0,L139.5 240.0" value="34,56 76,65  " id="line3" biztype="line" style=" cursor:   ;stroke:#F66;stroke-width:1;opacity:0.9;"/>
  </g>                                                   
 </g>   
</svg>

svg+js+line直线的拖动与缩放

2008-08-17 seven_ing

<svg width="800" height="800" onload="Donload(evt)" onmouseup="Donmouseup(evt)">
 <script><![CDATA[                    
      var SVGDocument = null;
      var SVGRoot = null;
      var TrueCoords = null;
      var Point = null;
      var BackDrop = null;
      var DragTarget = null;
 
  
 var dragger = null;
 var x;
 var y;
 var X1;
 var Y1;
 var X2;
 var Y2;
 var xx1;
 var yy1;
 var xx2;
 var yy2;
 var newXx = 0;
 var newYy = 0;
 var moveOver = null;
  
 function Doonmouseover(evt)
      {
    
  var onObject =  evt.getTarget();
         x=evt.clientX
         y=evt.clientY
 
         X1 =  onObject.getAttribute("x1" ); 
        Y1 =  onObject.getAttribute("y1") ;
       X2 =  onObject.getAttribute("x2" ); 
        Y2 =  onObject.getAttribute("y2") ;
       
  
     
    if(moveOver!=null){
   xx1 = Math.abs(X1-(x-newXx));
   yy1 = Math.abs(Y1-(y-newYy));
         xx2 = Math.abs(X2-(x-newXx));
   yy2 = Math.abs(Y2-(y-newYy));
   }
  else{
   xx1 = Math.abs(X1-x);
   yy1 = Math.abs(Y1-y);
         xx2 = Math.abs(X2-x);
   yy2 = Math.abs(Y2-y);
  }
   if(((xx1<4)&&(yy1<4))||((xx2<4)&&(yy2<4))){
  
     onObject.getStyle().setProperty("cursor", "n-resize");
   }
  else{
  
  onObject.getStyle().setProperty("cursor", "hand");
         }
    
   
          }
      function Donload(evt)
      {
   
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
   TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
   BackDrop = SVGDocument.getElementById("BackDrop");
   
      }

      function Donmousedown(evt)
      {
      var onObject =  evt.getTarget();
            if ( BackDrop != onObject )
          {
            if(((xx1<4)&&(yy1<4))||((xx2<4)&&(yy2<4)))
      {
   dragger = onObject ;
        dragger.getStyle().setProperty("cursor", "n-resize");  
           }
         else{
        
            DragTarget = onObject ;
         DragTarget .getStyle().setProperty("cursor", "move"); 
            DragTarget.parentNode.appendChild( DragTarget );
            DragTarget.setAttributeNS(null, "pointer-events", "none");
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
   
         }
      }
}

      function Donmousemove(evt)
      {
        
  if(dragger!=null)
 { 
            x=evt.clientX
            y=evt.clientY 
      if((xx1<4)&&(yy1<4))
   {
       dragger.getStyle().setProperty("cursor", "n-resize");
     
          dragger.setAttribute("y1",y-newYy);
    }
  if((xx2<4)&&(yy2<4)){
  dragger.getStyle().setProperty("cursor", "n-resize");
       dragger.setAttribute("y2",y-newYy);
   }
   }
  else{

          GetTrueCoords(evt);
         if (DragTarget)
         {  
            var newX = TrueCoords.x - GrabPoint.x;
            var newY = TrueCoords.y - GrabPoint.y;
            DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + ")");
   newXx = newX;
   newYy = newY;         
         }
}
      }

      function Donmouseup(evt)
      {
 dragger = null;
 if ( DragTarget )
         {
              var targetElement = evt.target;
            DragTarget.setAttributeNS(null, "pointer-events", "all");
            if ( "Folder" == targetElement.parentNode.id )
            {
               targetElement.parentNode.appendChild( DragTarget);
            }
       moveOver = DragTarget;
       DragTarget = null;
         }
      }

      function GetTrueCoords(evt)
      {
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX - translation.x)/newScale;
         TrueCoords.y = (evt.clientY - translation.y)/newScale;
      }

]]></script>
 <g id="all" onmousemove="Donmousemove(evt)">
  <g>
   <rect id="BackDrop" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all"/>
  </g>
  <g>
   <line onmouseover="Doonmouseover(evt)" onmousedown="Donmousedown(evt)" id="pointOne" x1="500" y1="100" x2="500" y2="300" style=" cursor:  ;fill:black;stroke:#F66;stroke-width:1;opacity:0.9;"/>
  </g>
  
 </g>
</svg>