将一条线从一个精确点旋转到另一个点

Question

我需要使用另一个 html 元素来模拟在两个 html 元素之间绘制的斜线，该元素基本上是平的（1 px 高 x 200 px 宽），就像一条线。 Here's an example。

在此示例中，我使用 CSS skewY 变换对线条的角度进行了硬编码，以使线条的角度以大约 10 像素为间隔。问题是我需要使用 javascript 动态地执行此操作。虽然已经知道起点和终点，但我将使用 jQuery 使用 skewY 设置线条的样式，这需要以度数为单位。

如何计算出倾斜的角度以使其在 2 个精确的像素点处开始和结束？我猜他们会涉及到一些代数。

谢谢！ 标记

Answer 1

鉴于已知的起点和已知的终点，以及每条线似乎是直角三角形的最长边这一事实，我认为一点三角学可以发挥作用。 假设您知道开始和结束之间的 x 距离（在您的代码“一”和“二”中），即水平 - 称之为相邻，并且您应该能够确定与顶部的距离（从前两个到第 n 个的距离），将其称为相反的，然后可以通过 SOHCAHTOA 作为 TOA 部分（或 TAN 角 = 与相邻的相反）或 TAN x = O/A 来建立角度（让我们称之为 x）或 x = tan -1 (O/A)。如果我没记错的话，角度将以弧度为单位，因此需要转换为度数（乘以 180/pi）

示例代码

var O = //to be set
var A = //to be set

var x = Math.atan(O/A) * (180 / Math.PI)