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功能错误

回答

相关问题