-1
JSとSVGの新機能です。私は、座標（単純な形式）を収集するコードを記述し、これらの情報に基づいてSVG内の与えられた座標を持つ三角形を印刷することになっている割り当てを与えられました。私は最初に、与えられた座標で三角形を描くことが可能かどうかをチェックしなければならないので、関数でそれを行う必要があります。残念ながら、SVGの運転は機能していません。どのようにそれを修正するための任意のアイデア？svg、ポリゴン、JS関数のエラー
コードはやり過ぎ、この作業のためにD3を必要としないでくださいここ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>
を、これは典型的な質問の種類を「なぜ、このコードが動作していない」、と私は編集後ということを実現したので、私は投票しましたこれを閉じて、あなたに知らせてください... – webeno