Svg, Polygon, JS Funktion Fehler

-1

Ich bin neu in JS und SVG. Ich bekam eine Aufgabe, wo ich einen Code schreiben sollte, der Koordinaten sammelt (ein einfaches Formular) und basierend auf diesen Informationen ein Dreieck mit gegebenen Koordinaten in SVG druckt. Ich muss es in einer Funktion machen, da ich zuerst prüfen muss, ob es möglich ist, ein Dreieck mit gegebenen Koordinaten zu zeichnen. Leider funktioniert das Fahren in SVG nicht. Irgendwelche Ideen, wie man es repariert?Svg, Polygon, JS Funktion Fehler

Der Code ist hier 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>

Quelle

2016-04-07 ninigi

dies ist eine typische Art der Frage: „Warum ist dieser Code nicht funktioniert“, und ich merkte nur, dass nach der Bearbeitung, so dass ich gestimmt um es zu schließen, lassen Sie es einfach wissen ... – webeno

Benötige D3 nicht für diese Aufgabe viel des Guten. Lets Angenommen, Sie haben Punkte [60,20, 100,40, 100,80], können Sie versuchen:

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>

Quelle

2016-04-07 18:45:17

Dies ist eine typische "warum ist dieser Code nicht funktioniert" Art der Frage, und ich erkannte nur, dass nach der Bearbeitung, so habe ich gewählt, um es zu schließen, nur Sie zu wissen (wie Sie habe eine Antwort darauf) ... – webeno

Antwort

Verwandte Themen