How do I get the rotation of degree with getBoundingClientRect?

Question

In my game, you can click on the orange box (it's supposed to represent a monster). Upon clicking, a green line will be appended to the characters div. For example for a better explanation:

This is the code I'm using to generate the line:

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);

And the CSS for that is:

.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;
}

Now, I'm getting that orange boxes getboundingClientRect here:

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

How do I determine the correct rotational degree, based upon where that orange box is located at (from the getboundingClientRect data)?

Not just that specific orange box, but any data that is retrieved from getBoundingClientRect. If that makes sense.. I'm a bit lost, sorry in advance if this is confusing. I pretty much want that line to go into the same direction as where that orange box is.

Answer 1

This is more of a math question rather than programming, but you should basically calculate the x and y differences between your character and its target, and then calculate the angle.

Assuming x1,y1 are the character coordinates, and x2,y2 are the target coordinates:

• (x2-x1) will give the x difference,
• (y2-y1) will give the y difference,
• ArcTangent ( (y2-y1) / (x2-x1)) will give you the angle in radians.
• angleInRadians * (180/pi) will give you the angle in degrees.
• 4*ArcTangent(1) will give you pi

Now in JavaScript:

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

• Or as Maurice suggested, use Math.atan2:

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

Here is an example:

$(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>

Here is a Fiddle if you are on mobile.