How to get the rotation of degree with getBoundingClientRect?


Tags: javascript,css

Problem :

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: http://i.gyazo.com/537c8acb9881a3bfaa6f19259de37618.gif

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

My question is: 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.



Solution :

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

assuming x1,y1 are the character coords, and x2,y2 are the target coords:

  • (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.


    CSS Howto..

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How to set the width of background-color of a div?

    How to do CSS wild card search? [duplicate]

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?

    How to zoom in to a specific point smoothly with CSS?

    ASP.Net MVC: How to use razor variable in CSS file

    How I can set a different font size for my text by css?

    How to line up lists side by side?

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    How center an absolute element (img) that's wider than its parent div?

    How to css this little button next to