Question

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

在这个例子中，我使用CSS skewY变换对线条的角度进行了硬编码，使线条的角度大约为10px。问题是我需要使用javascript动态执行此操作。虽然我已经知道了原点和目标点，但我将使用jQuery来使用skewY来设置线条的样式，这需要一个以度为单位的数字。

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

谢谢！标记

Answer 1

鉴于已知的起点和已知的终点，以及每条线看起来是直角三角形的最长边的事实，我认为可以发挥一点三角学的作用。假设你知道开始和结束之间的x距离（在你的代码'one'和'two'中），即水平 - 称之为相邻，并且你应该能够确定距离顶部的距离（从前两个到第n个两个的距离，称之为相反然后可以通过作为TOA部分的SOHCAHTOA（或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)

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

1 个答案: