svg，多邊形，JS功能錯誤

-1

我是JS和SVG的新手。我被賦予了一個任務，我應該編寫一個代碼來收集座標（一個簡單的表單），並根據這些信息在SVG中打印出一個給定座標的三角形。我必須在一個函數中執行它，因爲首先我必須檢查是否可以繪製給定座標的三角形。不幸的是，在SVG中的駕駛不起作用。任何想法如何解決它？svg，多邊形，JS功能錯誤

的代碼是在這裏https://jsfiddle.net/n07engyt/11/

<!doctype html> 
    <link rel="StyleSheet" href="skrypt.css" type="text/css" /> 
    <head> 
     <meta charset "UTF-8」 /> 
     <title> JavaScript </title> 
     <script type="application/javascript"> 
     function getCoordinates() { 
      return{ 
      x1:Number(cordinates.x1.value), 
      y1:Number(cordinates.y1.value), 
      x2:Number(cordinates.x2.value), 
      y2:Number(cordinates.y2.value), 
      x3:Number(cordinates.x3.value), 
      y3:Number(cordinates.y3.value) 
      } 
     } 


     function draw() { 
      var canvas = document.getElementById('canvas'); 
      if (canvas.getContext) { 
      var ctx = canvas.getContext('2d'); 
      var p = getCoordinates(); 
      //Jeśli punkty na jednej prostej nie może być trójkąta 
      if((p.x1 !== p.x2 || p.x1 !== p.x3) && (p.y1 !== p.y2 || p.y1 !== p.y3)) { 
      ctx.fillStyle="#A2322E"; 
      console.log(p) 
      ctx.beginPath(); 
      ctx.moveTo(p["x1"],p["y1"]); 
      ctx.lineTo(p["x2"],p["y2"]); 
      ctx.lineTo(p["x3"],p["y3"]); 
      ctx.closePath(); 

      ctx.fill(); 

      //dodawanie napisu 
      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d"); 
      ctx.font = "10px Arial"; 
      ctx.fillText("Rys.1 zrealizowany w canvas",20,180); 

      //Make an SVG Container 
      var svgContainer = d3.select("body").append("svg") 
            .attr("width", 200) 
            .attr("height", 200); 

//Draw the Rectangle 
     var rectangle = svgContainer.append("rect") 
          .attr("x", 10) 
          .attr("y", 10) 
          .attr("width", 50) 
          .attr("height", 100); 
      } 
      } 
     } 
    </script> 




    </head> 
    <body> 
     <p id="form"></p> 
     <form name="cordinates"> 
     <table> 
     <tr> 
      <td> Wierzcholek</td> 
      <td> Współrzędna X</td> 
      <td> Współrzędna Y </td> 
     </tr> 

     </tr> 

      <tr> 
      <td>1</td> 
      <td><input name="x1" type=text placeholder="x1" value="100"></td> 
      <td><input name="y1" type=text placeholder="y1" value="50"></td> 
      </tr> 

      <tr> 
      <td>2</td> 
      <td><input name="x2" type=text placeholder="x2" value="130"></td> 
      <td><input name="y2" type=text placeholder="y2" value="100"></td> 
      </tr> 

      <tr> 
      <td>3</td> 
      <td><input name="x3" type=text placeholder="x3" value="70"></td> 
      <td><input name="y3" type=text placeholder="y3" value="100"></td> 
      </tr> 
     </table> 
     </form> 

     <button onclick="draw();changeDimensions();">Rysuj</button><br/> 
     <canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">Rysunek</canvas> 

     <!--<svg width="200"height="200" style="border:1px solid #000000;"> 
       <rect id="rect1" x="10" y="10" width="0" height="0" style="stroke:#000000; fill:none;"/> 
     </svg> --> 

     <svg width="200" height="200" style="border:1px solid #000000;"> 
     <!--<rect id="rect1" x="10" y="10" width="50" height="80" style="stroke:#000000; fill:none;"/> --> 
     <!--<polygon points="0,0 0,0 0,0" style="fill:lime;stroke:purple;stroke-width:1" /> --> 

     <!--<rect x="0" y="0" width="0" height="0" fill="green" />--> 

     <!--<polygon x="100,50" y="130,100" z="70,100" style="fill:lime;stroke:purple;stroke-width:1" />--> 
     </svg> 
    </body> 
    </html>

來源

2016-04-07 ninigi

這是一個典型的「爲什麼不工作這碼」類型的問題，我只意識到編輯後，所以我投關閉它，只是讓你知道...... – webeno

不需要D3完成這個任務，矯枉過正。讓我們假設你有個[60,20, 100,40, 100,80]，你可以嘗試：

var SVG = document.getElementById('mySVG'); 
 
var pts = [60,20, 100,40, 100,80]; 
 

 
    var myPolygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); 
 
    myPolygon.setAttributeNS(null, 'points', pts.join(",")); 
 
    SVG.appendChild(myPolygon);

<svg id="mySVG" width="200" height="200" style="border:1px solid #000000;"> 
 
</svg>

來源

2016-04-07 18:45:17

這是一個典型的「爲什麼這個代碼不工作」類型的問題，我只知道編輯後，所以我投票結束它，讓你知道（就像你對此有一個答案）... – webeno

svg，多邊形，JS功能錯誤

回答

相關問題