Question

我有3 x，y点，我试图用来绘制一个正确的trangle。所以我在计算边长后计算三角形的角度。在我得到斜边的长度后，我想旋转斜边以便完成三角形。出于某种原因，即使旋转了适当的度数，我的斜边也有点偏离位置。这是我的代码和jsfiddle。

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

Answer 1

因为@epascarello评论了顶部和左部没有被考虑在内，所以首先要添加 “px”到那里的值，这打破了三角形，虽然在下面的例子中我已经重组了顶部和左边的设置，前两行形成相同的点（x1 y1），最后一个来自结束第2行（x2 y2）。要获得正确的角度，请将其旋转至135度并将变换原点设置为0px 0px，然后将其旋转到正确的位置。

说完这一切之后，你会发现使用像canvas这样的结果更加一致。

修改实际上只是意识到三角形是错误的方式，因为最后一点是100,100。（试图让它看起来像你的小提琴，忽略点的意思，更新下面的例子，以便每行使用正确的点，并将最后一个旋转到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); }

Answer 2

这是使用DIV和transform rotate()创建任何类型三角形的一种方法：

＆＃13;

function drawLine (p1, p2, stroke, color) {
    var dx = p2[0] - p1[0], // Horizontal distance
        dy = p2[1] - p1[1], // Vertical distance
        angle = Math.atan2(dy, dx) * (180 / Math.PI), // Angle related to X-axis
        length = Math.sqrt(dx * dx + dy * dy), // Line length
        div = document.createElement('div');
    div.style.position = "absolute";
    div.style.left = p1[0] + 'px'; // Set position to p1 using
    div.style.top = p1[1] - stroke / 2 + 'px'; // line weight correction
    div.style.width = length + 'px'; // width as line length
    div.style.height = stroke + 'px'; // height as line weight
    div.style.background = color;
    div.style.transformOrigin = '0% 50%'; // Set origin to 50% of line weight
    div.style.transform = 'rotate(' + angle + 'deg)';
    document.body.appendChild(div);
}

function drawTriangle (P1, P2, P3, stroke, color) {
    drawLine(P1, P2, stroke, color);
    drawLine(P2, P3, stroke, color);
    drawLine(P3, P1, stroke, color);
}

drawTriangle([10, 100], [60, 10], [110, 100], 10, 'rgba(255,0,0,0.5)');
drawTriangle([120, 10], [220, 10], [170, 100], 10, 'rgba(255,0,0,0.5)');
drawTriangle([100, 150], [200, 200], [150, 300], 1, '#000000');

＆＃13;

问题的正确答案＆＃34;在何处设置变换原点＆＃34;是0% 50%。在创建具有线宽和半透明颜色的三角形时，很容易找到它。

您也可以使用drawLine绘制例如矩形或圆形。

纯Javascript绘制三角形，定位斜边

2 个答案: