用JavaScript查找斜边

最近，我想到了一个可以让您集思广益的站点的想法。 这是我基本设想的：

用户将以中心思想或想法开始，并且能够分支出相关思想或想法。 这对于计划课程，演示或学习非常有用。 当我集思广益时，我想到了该项目需要的4个组件：

1个输入/文本区域

2一个按钮，用于创建新的想法分支。

3一条线，以可视方式连接该构思和分支的构思。

为此，我很快遇到了一个问题。 创建输入/文本区域很容易。 创建一个用于创建新输入/文本区域的按钮也非常容易。 困难的部分在视觉上以一种既实用又在视觉上有意义的方式对其进行设计。 例如，为简单起见，我们可以简单地让每个按钮创建一个新的表单元素，将表单元素垂直放置在上一个元素的下方。 尽管从编程的角度来看这会更简单，但从视觉上看，这对用户而言并没有多大意义，因为很难分辨哪个分支文本框与哪个先前的想法或文本框相关。 通常来说，这对我很有益，所以我决定从小处着手，看看是否可以让机械师先进行小规模的工作。 我从点开始，每个点代表一个from元素/文本框。 每个点的宽度为25像素，高度为25像素，颜色为黑色。 我的第一个目标是在单击第一个点时添加一个新点，然后在每次单击时在第一个点周围分配后续点。 为了解决这个问题，我创建了一个名为“ click”的变量并将其设置为0； 然后，在每个点击事件上，我添加一个。

let clicks = 0;
  $('button').click(function() {
    clicks = clicks + 1;

然后，我在if语句中创建一个元素。

if(clicks == 1) {
  let blackDot = document.createElement('div');
  blackDot.id = "outerDiv1";
  document.body.appendChild(blackDot);
  document.getElementById('container').appendChild(blackDot);
  blackDot.className = "blackDotClass";
}

这就是它的基础。 然后，向其添加上下左右边距。 不包含在“ blackDotClass”类中，因为每个创建的元素的边距会有所不同。 例如，第一个点在父元素的右边，第二个创建的点在它的下面，第三个点在左边，等等，依此类推。我将这样插入：

if(clicks == 1) {
  let blackDot = document.createElement('div');
  blackDot.id = "blackDotID1";
  document.body.appendChild(blackDot);
  document.getElementById('container').appendChild(blackDot);
  blackDot.style.marginTop = "25px";
  blackDot.style.marginLeft = "200px";
  blackDot.className = "blackDotClass";
}

然后，如果再次单击父点，我们可以执行以下操作：

if(clicks == 2) {
  let blackDot = document.createElement('div');
  blackDot.id = "blackDotID2";
  document.body.appendChild(blackDot);
  document.getElementById('container').appendChild(blackDot);
  blackDot.style.marginTop = "0px";
  blackDot.style.marginLeft = "200px";
  blackDot.className = "blackDotClass";
}

我们唯一更改的是“ ID”和最高边距。 然后，对于第三个元素，我们可能会更改顶部和左边距，以将每个新元素放置在父点周围的圆圈中。 这部分很简单，但是对于没有物理线将一个点连接到另一个点的用户来说，这仍然很令人困惑。 否则，再说一次，真的很难分辨出哪些元素实际上是连接在一起的，仅剩下空格就可以了。

解决这个问题的最初想法是使用多边形。 由于每个“点”或“元素”或我们使用的任何东西都将具有一组x和y坐标，因此我可以使用父元素的坐标和该坐标来绘制从一个元素到下一个元素的多边形线。 这是我所设想的图：

在得出svg多边形不起作用的结论之前，我实际上经历了这个想法的几次迭代。 原因是多边形是svg元素，并且必须在svg容器内。 因此，您并不仅仅是将a与b对齐。 但是，您还将它们与svg元素本身对齐，该元素本身具有一组尺寸。 以这个为例：

您可能会开始该过程，并正确地排列了所有内容，并以上述示例结束，在该示例中，线从点a到点b没有连接。 自然地，假设是该线不够长，并且与多边形的坐标或长度有关。 当您遇到问题时，可能是svg容器的大小不合适或对齐不正确。 您实际拥有的是：

您的线是对的，您的坐标可能是对的，但是由于svg容器太小，您只能看到实际多边形的一小部分。 当然，您可以在容器周围做一个边框以查看容器的位置，但是想像一下，当您有多个元素，然后是svg容器和多边形时，这样做会变得多么复杂……这是一场噩梦。

所以我想出了一个更简单的解决方案。 只是一个div，宽度为1，带有边框。 每次单击“ A”并创建一个新的子元素“ B”时，我还创建了第三个元素“ C”，这两个元素之间连接了一条线，或者是一个带有边框的div。

如果A和B在同一X轴上，并且显示设置为内联，或者它们包含在span标记中，那么您的工作就完成了，因为您不需要对y轴进行任何计算。 但是，再次，从用户的角度来看，如果一切都在一条直线上，将很难知道想法和元素的连接位置。 因此，在这些思维导图中，它们通常倾向于呈圆形。 这就是我的想法。 创建完B后，单击A即可得到每个多边形的坐标，就像对多边形所做的一样。

  let element1 = dot1.getBoundingClientRect();
  let element2 = dot2.getBoundingClientRect();
  console.log(element1);
  console.log(element2);

我也想找到我元素的中点。 如果我的点是300px大，我不希望线连接到顶部，而是连接到中间。 我通过将高度和宽度除以2来做到这一点，这是我可以从“ getboundingClient”函数中找到的数据。

let midpointX1 = element1.width/2;
  let midpointY1 = element1.height/2;
  
  let midpointX2 = element2.width/2;
  let midpointY2 = element2.height/2;

现在，我的思考过程就是这样。 如果我知道x和y坐标（也包括在“ getBoudningClient”函数中），那么我希望可以做一些数学运算。 我想知道的是连接两个元素的线的长度以及线的角度。 我可以用一些三角函数来做到这一点，首先，我用勾股定理找到长度：A平方+ B平方= C平方。

通过将两个元素的关系变成三角形的角，然后我们可以使用数学来发现直线的长度，如上所述，然后可以使用切线来发现直线的角度。 我要做的是创建一个函数，该函数同时获取两个坐标并运行它们以查找所需的内容。

let midpointX1 = element1.width/2;
  let midpointY1 = element1.height/2;
  
  let midpointX2 = element2.width/2;
  let midpointY2 = element2.height/2;
  
  let top1 = element1.top - midpointY1;
  let top2 = element2.top - midpointY2;
  let left1 = element1.left - midpointX1;
  let left2 = element2.left - midpointX2;
  
  function findTriangle (w, x, y, z) {
    
    let difference = function (a, b) { return Math.abs(a - b); }
    let opposite = difference(w, x);
    let adjacent = difference(y, z);
    
    let hypotenuseLengthSquared = Math.pow(opposite, 2) + Math.pow(adjacent, 2);
    console.log(hypotenuseLengthSquared);
    
    let hypotenuseLength = Math.sqrt(hypotenuseLengthSquared);
    console.log(hypotenuseLength);
    console.log(adjacent);
    
    let angle = Math.atan(opposite/adjacent)*100;
    console.log(angle);
    return [opposite, adjacent, hypotenuseLength, angle];
  }
  let triangle = findTriangle(top1, top2, left1, left2);
  console.log(triangle);

假设我们的元素是对称的，函数“ findTriangle”将元素的顶部和左侧减去中点，并基本给出两个元素的x和y坐标，以计算斜边的角度和长度。 我也有函数返回相邻和相对的面，以备以后使用时使用。 现在，我将使用这些坐标和返回值创建div。

let newDiv = document.createElement('div');
  newDiv.id = "test";
  document.body.appendChild(newDiv);
  document.getElementById('dot1').appendChild(newDiv);
  newDiv.style.borderColor = "#1cce3a";
  newDiv.style.borderWidth = "3px";
  newDiv.style.borderStyle = "solid";
  newDiv.style.borderColor = "#1cce3a";
  newDiv.style.width = ""+triangle[2]+"px";
  newDiv.style.transform = "rotate("+triangle[3]+"deg)";
  newDiv.style.zIndex = -1;

因为我的return语句是一个数组，所以当我要求元素的宽度和变换时，我仅使用需要的数组索引[2]和[3]。

现在，我可以在第二个if语句中运行此完全相同的函数。 由于第二个点在DOM上将比第一个点略低，因此该函数将计算两者之间的距离并返回连接线（div），以便它们在屏幕上可视地连接起来，我们可以得到类似于我最初的愿景是什么。 但是，即使进行了这些精确的计算，这里的情况也很容易变坏。 例如，如果将容器设置为flexbox显示，它将丢弃所有计算。 但是，总的来说，这是一个非常有趣的练习。

写这篇文章的主要原因之一是，作为一个年轻人，我讨厌数学。 我一点也不擅长，老实说，我并没有付出太多努力。 即使是初次学习JavaScript的人，我也会遇到这些练习，在这些练习中，您需要通过一些复杂的公式来找到一些晦涩的数字。 我总是对自己说：“为什么我需要使用它？ 这是毫无意义！！”。 我至少对我知道，当我有这些想法时，我立即开始调教。 但是，在此过程中，很高兴看到使用勾股定理和其他三角函数方程式的实用性和实用性。 关键是，如果您也有这种感觉，请不要调教。 您可能需要比您想象的更早使用这些信息！ 随时与我们联系以获取反馈或问题。 谢谢！

From: https://hackernoon.com/finding-a-hypotenuse-with-javascript-5d28996f8fef