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 link after the CSS-Animation?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How can I change css for every DOM object in the page in SAPUI5

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How to fix on Mobile Devices? Custom CSS. (Wordpress)

    Multiple DIVs, same Classes, how to reduce css markups?

    How to stop my css declaration from being overridden

    how to display php search engine execution time and number of results before the results

    How to assign a unique CSS id to each cell in a jqGrid?

    several questions about how to work with divs

    How to divide 3 divs(CSS + MVC)

    How to create an image that changes state?

    How to render a template with dynamic CSS?

    drawing a image like shown

    How to generate css using google chrome inspector to further use them?

    How to center a child div with a smaller parent div

    css: How to float div according to 2nd div in hierarchy

    How do I place text to the right of a relatively positioned image?

    How to detect all events added on a div

    How to remove the yellow row highlighting

    How to Vertically Center 2 anchor tags with CSS?

    How to stop web content from being displayed before css/jquery is prepared?

    How Is This Effect Achieved? HTML/CSS/jQuery [closed]

    How to get on a single page different links based on css

    How to place a css button in center (horizontal) of four table columns

    CSS table: How to position action buttons left to each row

    How do I remove column padding to have full-width inputs in Bootstrap 3?

    How can i overwrite media queries defined in Bootstrap CSS

    How to use CSS in html table inside javascript