javascript - CSS 360°线旋转失败

Question

我正在尝试根据元素的位置使用 css transfrom 属性旋转一条线。 (演示:http://www.nimmi.de/tools) 描述:单击一个红色圆圈，然后单击另一个将它们相互连接起来。然后按住鼠标左键并在容器上方拖动它。你会看到线在一定 Angular 后出现故障。我不知道为什么，这是我的轮换代码:

function lineTo(x1,y1,x2,y2,line){
    var dist = Math.sqrt(Math.pow(x2 - x1,2) + Math.pow(y2 - y1, 2));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

    line.style.transform = "rotate("+ angle + "deg)";
    line.style.width = dist+"px";
}

x1/x2/y1/y2 只是直线连接的两个点的坐标。 line 只是一个具有以下样式的 HTML hr 元素:

        .line {
            border: 1px solid #000;
            margin-top: calc(50% - 1px);
            margin-left: calc(50% - 1px);
            width: 0px;
            visibility: hidden;
            position: absolute;
            transform-origin: 0% 0%;
            z-index: -1;
        }

我不明白为什么会出现这个错误，错误在哪里!？

Answer 1

atan 并不总是正确的数学函数。当变量 x 和 y 最终为负时，会出现错误。

尝试更改函数以在给定当前输入的情况下计算出正确的函数。