纯JavaScript画一个三角形，定位斜边 [英] Pure Javascript drawing a triangle, positioning hypotenuse
问题描述
我有3 x，y点，我试图画一个右转。所以我计算边长之后的三角形的角度。在我得到斜边的长度后，我想旋转斜边使它完成三角形。出于某种原因，我的斜边是有点偏离位置，即使它旋转适当的度数。这是我的代码和一个jsfiddle。
I have 3 x,y points that I am trying to use to draw a right trangle. So I am calculating the angles of the triangle after calculating side lengths. After I have gotten the hypotenuse's length, I want to rotate the hypotenuse so that it completes the triangle. For some reason, my hypotenuse is a bit out of position even though it is rotated the appropriate amount of degrees. Here is my code and a jsfiddle.
http：// jsfiddle .net / kn5zk54c /
<html>
<head>
<script>
window.onload = function() {
//drawTriangle(1,1,100,1,100,100);
drawTriangle(1,1,100,1,1,100);
}
function drawTriangle(x1, y1, x2, y2, x3, y3) {
//The length of side a is the difference between point 1 and point 2's x (horizonal) axis.
var a = Math.abs(x1 - x2);
//The length of side b is the difference between point 2 and point 3's y (veritcal axis)
var b = Math.abs(y2 - y3);
//Too find the length of the last side c, we must use the pythagorean theorem.
//c*c=a*a+b*b
//square side a and b, and add the result. Then find the square root of the result.
var c = Math.sqrt(((a*a) + (b*b)));
//We must use the Cosine rule to solve the triangles 3 angles.
//c^2 = a^2 + b^2 - c^2
var A = (Math.acos(((c*c)+(b*b)-(a*a))/(2*c*b)))*(180/Math.PI);
var B = (Math.acos(((c*c)+(a*a)-(b*b))/(2*a*c)))*(180/Math.PI);
var C = (Math.acos(((a*a)+(b*b)-(c*c))/(2*a*b)))*(180/Math.PI);
//Add side A div between points x1,y1, and x2,y2
var div = document.createElement('div');
div.style.height = '1px';
div.style.width = a + 'px';
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x1;
div.style.top = y1;
document.body.appendChild(div);
//Add side B div between points x2,y2 and x3,y3
div = document.createElement('div');
div.style.height = b + "px";
div.style.width = "1px";
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x2;
div.style.top = y2;
document.body.appendChild(div);
div = document.createElement('div');
div.style.height = "1px";
div.style.width = c + "px";
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x3;
div.style.top = y3;
div.style.transform = "rotate(45deg)";
document.body.appendChild(div);
}
</script>
</head>
<body>
</body>
</html>
推荐答案
正如@epascarello评论的顶部和左边不是被考虑因此第一件事是添加
px到那里的值，这打破了三角形虽然这样在下面的例子我已经重组了顶部和左边被设置为，前两行形成同一点（x1 y1），最后一个来自第2行的结束（x2 y2）。要获得正确的角度，将其旋转到135deg，并将转换原点设置为0px 0px，以便它然后旋转到正确的地方。
So as @epascarello commented the top and left are not being taken into account so first thing is to add "px" to the values there, this breaks the triangle though so in the example below I have restructured what the top and left are being set as, the first two lines come form the same point(x1 y1) the last comes from the end of line 2 (x2 y2). To get the angle right over rotate it to 135deg and set the transformation origin as 0px 0px so that it then rotates in to the right place.
使用类似canvas的东西找到更一致的结果。
Having said all this you would find more consistent results using something like canvas.
EDIT
实际上刚刚实现的三角形是错误的方式，是100,100。 （试图让它看起来像一个从你的小提琴，忽略了什么点说，更新了下面的例子，所以每行使用正确的点，并将最后一个旋转到225deg）
EDIT actually just realised the triangle is the wrong way round as the last point is 100,100. (was trying to make it look like the one from your fiddle and ignoring what the points were saying, updated the example below so each line uses the correct points and over rotated the last to 225deg)
window.onload = function() {
drawTriangle(1, 1, 100, 1, 100, 100);
}
function drawTriangle(x1, y1, x2, y2, x3, y3) {
//The length of side a is the difference between point 1 and point 2's x (horizonal) axis.
var a = Math.abs(x1 - x2);
//The length of side b is the difference between point 2 and point 3's y (veritcal axis)
var b = Math.abs(y2 - y3);
//Too find the length of the last side c, we must use the pythagorean theorem.
//c*c=a*a+b*b
//square side a and b, and add the result. Then find the square root of the result.
var c = Math.sqrt(((a * a) + (b * b)));
//We must use the Cosine rule to solve the triangles 3 angles.
//c^2 = a^2 + b^2 - c^2
var A = (Math.acos(((c * c) + (b * b) - (a * a)) / (2 * c * b))) * (180 / Math.PI);
var B = (Math.acos(((c * c) + (a * a) - (b * b)) / (2 * a * c))) * (180 / Math.PI);
var C = (Math.acos(((a * a) + (b * b) - (c * c)) / (2 * a * b))) * (180 / Math.PI);
//Add side a.
var div = document.createElement('div');
div.style.height = '1px';
div.style.width = a + 'px';
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x1 + "px";
div.style.top = y1 + "px";
document.body.appendChild(div);
//Add side b.
div = document.createElement('div');
div.style.height = b + "px";
div.style.width = "1px";
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x2 + "px";
div.style.top = y2 + "px";
document.body.appendChild(div);
//Add side c.
div = document.createElement('div');
div.style.height = "1px";
div.style.width = c + "px";
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x3 + "px";
div.style.top = y3 + "px";
div.style.transform = "rotate(225deg)";
div.style.transformOrigin = "0px 0px";
document.body.appendChild(div);
}
这篇关于纯JavaScript画一个三角形，定位斜边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
