如何使用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

這更多的是數學問題，而不是編程問題，但是您基本上應該計算出角色與目標之間的x和y差，然后計算角度。

假設x1,y1是字符坐標， x2,y2是目標坐標：

• (x2-x1)將給出x的差，
• (y2-y1)將得出y的差，
• ArcTangent ( (y2-y1) / (x2-x1))將為您提供弧度角。
• angleInRadians * (180/pi)將以度為單位。
• 4*ArcTangent(1)將給您pi

現在在JavaScript中：

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

• 或者如莫里斯建議的那樣，使用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> 

如果您在移動設備上，這是一個小提琴 。