javascript - 如何使用 getBoundingClientRect 获得度数的旋转？

Question

在我的游戏中，您可以点击橙色框(它应该代表怪物)。单击后，一条绿线将附加到字符 div。例如为了更好的解释:

这是我用来生成该行的代码:

l = document.createElement('div');
l.innerHTML='<div id="oLineBar" style="  transform: rotate(' + RANDOM + 'deg);" class="fadeIn2"><div id="lineBar" class="lineBarCharacter"></div></div>';
character.appendChild(l);

它的 CSS 是:

.lineBarCharacter{
    height: 321px;
    width: 2px;
    background: rgba(39, 182, 0, 0.46)
}

#oLineBar {
    position: absolute;
    top: 20px;
    left: 37px;
    opacity: 1;
    transition: transform 1s linear;
    transform-origin: top left;
    transform-style: preserve-3D;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    -ms-transition-property: opacity, -ms-transform;
}

现在，我在此处获取橙色框 getboundingClientRect:

ClientRect {height: 95, width: 88, left: 1250.5, bottom: 471, right: 1338.5…}bottom: 471height: 95left: 1250.5right: 1338.5top: 376width: 88

如何根据橙色框所在的位置(来自 getboundingClientRect 数据)确定正确的旋转度数？

不仅是那个特定的橙色框，还有从 getBoundingClientRect 检索到的任何数据。如果这是有道理的..我有点迷路，如果这令人困惑，请提前道歉。我非常希望这条线与橙色框所在的方向相同。

Answer 1

这更像是一道数学题而不是编程题，但您基本上应该计算 Angular 色与其目标之间的 x 和 y 差值，然后计算 Angular 。

假设x1,y1为字符坐标，x2,y2为目标坐标:

• (x2-x1) 将给出 x 差值，
• (y2-y1) 将给出 y 差值，
• ArcTangent ( (y2-y1)/(x2-x1)) 将为您提供以弧度为单位的 Angular 。
• angleInRadians * (180/pi) 将为您提供以度为单位的 Angular 。
• 4*ArcTangent(1) 将为您提供 pi

现在在 JavaScript 中:

var angle = Math.round(Math.atan((y2 - y1) / (x2 - x1)) * (180 / (4 * Math.atan(1))));

• 或者按照 Maurice 的建议，使用 Math.atan2:

  var angle = Math.round(Math.atan2(y2 - y1 , x2 - x1) * (180 / (4 * Math.atan(1))));
  

这是一个例子:

$(function () {
    $(document).on("mousemove", function (ev) {
        var x1 = 200,
            y1 = 200;
        var x2 = ev.clientX,
            y2 = ev.clientY;
        var d =  Math.sqrt(Math.pow((y2 - y1),2)+Math.pow((x2 - x1),2));
        var angle = Math.round(Math.atan2((y2 - y1) , (x2 - x1)) * (180 / (4 * Math.atan(1))));
        console.log(angle);
        $("#line").css({
            "transform":"rotate("+angle+"deg)",
            "width":d+"px"
        });
    });
});

#line {
    position:absolute;
    left:200px;
    top:200px;
    width:200px;
    height:5px;
    background:green;
    transform-origin: 0% 0%;
    transform:rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line"></div>

这是一个 Fiddle 如果您使用的是移动设备。