Question

我是JS和SVG的新手。我得到了一个任务，我应该编写一个代码来收集坐标（一个简单的形式），并且基于这些信息将在SVG中打印一个给定坐标的三角形。我必须在函数中执行它，因为首先我必须检查是否可以绘制给定坐标的三角形。不幸的是，SVG中的驱动无法正常工作。任何想法如何解决它？

代码在这里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>

Answer 1

不需要D3来执行此任务，过度杀伤。假设你有点[60,20, 100,40, 100,80]，你可以尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

svg，polygon，JS函数错误

1 个答案: