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 make only background image transparent in responsive square grid?

    How to use ­ and the CSS “hyphens” property together?

    How to center a border-width shape properly, relative to its parent input button?

    How to put background-color only a section of a select? CSS

    How to choose second and third element (li) in
      tag (with CSS)?

    How to set negative z-index with jQuery?

    How to make the new long shadow trend with CSS?

    How to turn off spell checking in CSS?

    How to scroll left column when cursor is above right column?

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    How to use Segoe Print font in CSS?

    How to avoid clipping in CSS?

    How to make accessible h1 with logo

    How to read CSS specification?

    How can I attach an object to a fixed location on an image?

    How can I change the shape of a gridview to circular?

    How to make border for UL if Li has style “float:left;”?

    CSS HTML How to make a larger image than div display in full in div

    How to get custom css to load after richfaces?

    How to remove spacing around in CSS? [duplicate]

    How can I display links in 2 rows?

    How to select nested UL element without class in JavaScript

    How to know from css if a select is opened

    How to have a logo in the middle of two menu lists?

    how to only load one IFRAME using @media and display:none; CSS

    How To Make This Form Work

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to use CSS sprites within a responsive design

    how to hover after calling jquery animate()

    How can I add padding to an element on my page?