个人中心
gpt4 book ai didi

javascript - 纯Javascript绘制三 Angular 形，定位斜边

转载 作者：太空宇宙 更新时间：2023-11-04 14:15:52 26 4
gpt4 key购买 nike

我尝试使用 3 个 x,y 点来绘制直 Angular 三 Angular 形。所以我在计算边长后计算三 Angular 形的 Angular 。得到斜边的长度后，我想旋转斜边以完成三 Angular 形。出于某种原因，我的斜边有点错位，即使它旋转了适当的度数。这是我的代码和一个 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”到那里的值，这打破了三 Angular 形虽然所以在下面的例子中我已经重组了顶部和左侧的设置，前两行来自相同的点(x1 y1)最后一条来自末端第 2 行 (x2 y2)。要获得正确的 Angular ，请将其旋转到 135 度并将变换原点设置为 0px 0px，以便它随后旋转到正确的位置。

说了这么多，你会发现使用像 Canvas 这样的东西更一致的结果。

编辑实际上刚刚意识到三 Angular 形是错误的，因为最后一点是 100,100。 (试图让它看起来像你的 fiddle 中的那个并忽略了点在说什么，更新了下面的示例所以每一行都使用正确的点并将最后一个旋转到 225 度)

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 - 纯Javascript绘制三 Angular 形，定位斜边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26594456/

26 4 0
文章推荐： javascript - 从 100% 过渡到自动
文章推荐： java - Javolution Struct 优化/配置调整技巧？
文章推荐： html - 页脚 div 定位到错误的位置
文章推荐： java - UPnP 内容目录浏览返回 null
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com