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繪製路徑

回答

相關問題