SVG描画パスとonclick

私はjavascriptを初めて使用しているので、mouseeventsでパスを描画しようとしています。私はFRAMの4マウスクリックのパスを経由して作成したいSVG描画パスとonclick

：私は2つの大きな問題です。しかし、私は私のパスが非常に奇妙に見える理由を理解できません。なぜそれは私のマウスイベントのポイントのように見えません。マウスイベントのように見えるパスを作成するにはどうすればよいですか？

私はこのようなI Tを試してみてください。私は2番目の質問を得た

<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>

。 javascriptでパスを作成するにはどうすればよいですか？私はパスをドラッグ可能にしたいからです。このように：

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

出典

2016-05-18 thenewOne1234567890

clientXとclientYの座標はブラウザのウィンドウ座標です。それらをsvg座標に変換する必要があります。 getScreenCTM（）関数は、svg座標をウィンドウ座標に変換する変換行列を返します。この行列の逆行列を使用して、ウィンドウ座標からsvg座標に変換します。クリック機能で、あなたの例では

、あなたは...

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);

あなたのドラッグ可能なスタイルを使用するには...と

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

を置き換えることができ、あなたはクラス属性を設定する必要があります。 drawSVG関数のあなたの例では、次のものを追加することができます。

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

出典

2016-05-19 11:30:48

Thxそれは完璧に機能します！ – thenewOne1234567890

答えて

関連する問題