SVG与onclick绘制路径

我是JavaScript的新手，我尝试用mouseevents绘制路径。我得到了两个大问题：SVG与onclick绘制路径

我想创建通过4 frac路径上的鼠标点击。但我没有明白为什么我的路径看起来很奇怪。为什么它看起来不像我的鼠标事件的点。我如何创建看起来像我的鼠标事件的路径？

我尝试I T这样的：

<script type="text/ecmascript"> 
    window.onload = function() { 
    }; 

    var xArry = new Array(); 
    var yArry = new Array(); 
    var path = document.getElementById('pathId'); 

    function clicked(evt){ 

      xArry.push(evt.clientX); 
      yArry.push(evt.clientY); 

      if(xArry.length < 4 && yArry.length < 4){ 

       console.log("length x y "+xArry[0]+" "+yArry[0]); 
      }else if(xArry.length ==4 && yArry.length == 4){ 
       console.log(" Else if: length x y "+xArry[0]+" "+yArry[0]); 
       drawSVG(xArry,yArry); 
      }else{ 
       xArry = new Array(); // x und y punkte 
       yArry = new Array(); 

      } 



    } 

    var drawSVG = function (xArryTmp,yArryTmp) { 
     var a; 
     var b; 
     var c; 
     var d; 
     a = xArryTmp[0]+" "+yArryTmp[0]; 
     b = xArryTmp[1]+" "+yArryTmp[1]; 
     c = xArryTmp[2]+" "+yArryTmp[2]; 
     d = xArryTmp[3]+" "+yArryTmp[3]; 
     var pathTmp = "M"+a+" L"+b+" L"+c+" L"+d+" Z"; 
     alert(pathTmp); 

     var newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");  
     newpath.setAttributeNS(null, "d", pathTmp); 
     document.getElementById("svgid").appendChild(newpath);   
     return null;         
    }; 


</script> 
</head> 
<body> 

<svg id = "svgid" height="600" width="600" onclick="clicked(evt)"> 
    <path id = "pathId" /> 
    <rect id="rect1" width="600" height="600" 
      style="stroke:#000000; fill:none;"/> 
</svg> 



</body> 
</html>

我得到了第二个问题。我如何将CSS集成到我的javscript创建路径中？因为我想让路径可以拖动。像这样：

<style> 
     .draggable { 
      cursor: move; 
     } 
</style>

来源

2016-05-18 thenewOne1234567890

clientX和clientY坐标是浏览器窗口坐标。您需要将它们转换为svg坐标。 getScreenCTM（）函数返回一个转换矩阵，将svg坐标转换为窗口坐标。使用此矩阵的逆矩阵将窗口坐标转换为svg坐标。

在点击功能的例子，你可以替换...

xArry.push(evt.clientX); 
yArry.push(evt.clientY);

与...

var svg = document.getElementById("svgid"); 
var point = svg.createSVGPoint(); 
point.x = evt.clientX; 
point.y = evt.clientY; 
point = point.matrixTransform(svg.getScreenCTM().inverse()); 
xArry.push(point.x); 
yArry.push(point.y);

要使用拖动的风格，您需要设置类属性。在您的drawSVG函数示例中，您可以添加...

newpath.setAttributeNS(null, "class", "draggable");

来源

2016-05-19 11:30:48

Thx它的工作原理非常完美！ – thenewOne1234567890

SVG与onclick绘制路径

回答

相关问题