2

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

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

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

谢谢！标记

4

1 回答 1

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)
于 2013-09-09T23:36:12.963 回答