繪製一個三角形的純Javascript，定位斜邊

我有3個x，y點，我試圖用來繪製一個正確的trangle。所以我在計算邊長之後計算三角形的角度。在獲得斜邊的長度後，我想旋轉斜邊以使其完成三角形。出於某種原因，即使旋轉了適當的度數，我的斜邊位置也有些偏離了位置。這是我的代碼和jsfiddle。繪製一個三角形的純Javascript，定位斜邊

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>

來源

2014-10-27 David Stampher

您必須正確設置['transform-origin']（https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin）。 – Teemu 2014-10-27 18:39:17

好的，謝謝Teemu，我應該在哪裏設置轉換的起點以形成三角形。 – 2014-10-27 18:43:20

您並未設置頂部和左側的單位。將「px」添加到值中。 'div.style.left = x1 +「px」; div.style.top = y1 +「px」;' – epascarello 2014-10-27 18:45:22

因此，作爲@epascarello評論上方和左側沒有被考慮進去，以便第一件事就是「PX」添加到那裏的價值，這打破了三角形，但這樣的下面的例子我重新設置了頂部和左邊的設置，前兩行來自同一個點（x1 y1），最後一行來自第2行的結尾（x2 y2）。要將角度旋轉到135deg並將轉換原點設置爲0px 0px，以便旋轉到正確的位置。

說了這麼多，你會發現使用類似畫布的更一致的結果。

編輯實際上剛剛意識到三角形是錯誤的方式，最後一點是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); 
 

 
}

來源

2014-10-27 19:23:58 Quince

嘿謝謝你的回覆，這很有幫助。但是一個簡單的問題，我認爲點C（x3，y3）應該在左邊超過100px，因爲對DrawTriangle函數的調用如下所示。 drawTriangle（1，1，100，1，100，100）; 但是，取而代之的是x3和y3似乎約爲1,100。只是好奇，爲什麼C似乎在對面，我期望它考慮drawTriangle的硬編碼輸入參數。 – 2014-10-27 19:29:54

yep剛剛也看到了，並更新了我的答案， – Quince 2014-10-27 19:31:20

我將它標記爲更新後的答案，這是基於C點被放置在100,100的預期結果。如果將x3和y3設置爲100,200，我需要計算旋轉多少度的任何提示？ – 2014-10-27 19:34:41

這裏有一種方法來創建任何類型的三角形的使用DIV S和transform rotate()：

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

「如何設置變換原點」的問題的正確答案是0% 50%。在創建線重和半透明顏色的三角形時，很容易發現這一點。

您也可以使用drawLine繪製例如矩形或圓圈。

來源

2014-10-28 11:01:05 Teemu

這非常棒 – Quince 2014-10-29 12:05:44

繪製一個三角形的純Javascript，定位斜邊

回答

相關問題