Jak uzyskać obrót stopnia z getBoundingClientRect?

Question

W mojej grze możesz kliknąć pomarańczowe pudełko (ma to oznaczać potwora). Po kliknięciu, zielona linia zostanie dołączona do div znaków. Na przykład dla lepszego wyjaśnienia:

Jest to kod używam do generowania linii:

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

a CSS tego jest:

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

Teraz dostaję te pomarańczowe skrzynki getboundingClientRect tutaj:

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

Jak określić prawidłowy stopień obrotu, w zależności od tego, gdzie znajduje się pomarańczowe pudełko pod adresem (z danych getboundingClientRect)?

Nie tylko to konkretne pomarańczowe pudełko, ale wszelkie dane pobrane z getBoundingClientRect. Jeśli to ma sens ... Jestem trochę zagubiony, przepraszam z góry, jeśli to jest mylące. Chciałem, aby ta linia podążała w tym samym kierunku, w którym znajduje się to pomarańczowe pudełko.

Answer 1

To raczej pytanie matematyczne niż programowanie, ale powinieneś zasadniczo obliczyć różnice między znakami X i Y, a następnie obliczyć kąt.

Zakładając x1,y1 są współrzędne znaków i x2,y2 są współrzędne cel:

• (x2-x1) daje różnicę X
• (y2-y1) daje różnicę Y,
• ArcTangent ((y2-y1)/(x2-x1)) daje kąt w radianach.
• angleInRadians * (180/pi) poda kąt w stopniach.
• 4*ArcTangent(1) daje pi

Teraz w JavaScript:

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

• Albo jak sugeruje Maurice, użyj Math.atan2:

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

Oto przykład:

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

Oto Fiddle jeśli jesteś na telefon komórkowy.