Wie bekomme ich die Rotation des Grads mit getBoundingClientRect?

Question

Wie bekomme ich die Rotation des Grads mit getBoundingClientRect?

8

In meinem Spiel kannst du auf das orangefarbene Kästchen klicken (es soll ein Monster darstellen). Beim Klicken wird eine grüne Linie an das Zeichen div angehängt. Zum Beispiel für eine bessere Erklärung:

Dies ist der Code, mit dem ich die Zeile erzeuge:

%Vor%

Und das CSS dafür ist:

%Vor%

Nun, ich bekomme diese orangefarbenen Kästchen getboingingClientRect hier:

%Vor%

Wie ermittle ich den richtigen Grad der Drehung, basierend darauf, wo sich das orangefarbene Kästchen bei befindet (aus den getboundingClientRect-Daten)?

Nicht nur diese bestimmte orangefarbene Box, sondern alle Daten, die von getBoundingClientRect abgerufen werden. Wenn das Sinn macht .. Ich bin ein bisschen verloren, sorry im Voraus, wenn das verwirrend ist. Ich möchte, dass diese Linie in die gleiche Richtung geht wie die orange Box.

javascript css

NiCk Newman 06.02.2015, 12:08

quelle

1 Antwort

Tags und Links javascript css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Schwere Controller-Kommunikation in AngularJS

score 1 · Accepted Answer

Dies ist eher eine mathematische Frage als eine Programmierung, aber Sie sollten grundsätzlich die x- und y-Differenzen zwischen Ihrem Charakter und seinem Ziel berechnen und dann den Winkel berechnen.

Angenommen, x1,y1 sind die Zeichenkoordinaten und x2,y2 sind die Zielkoordinaten:

(x2-x1) gibt die x Differenz,
(y2-y1) gibt die y-Differenz an,
ArcTangent ( (y2-y1) / (x2-x1)) gibt Ihnen den Winkel im Bogenmaß.
angleInRadians * (180/pi) gibt dir den Winkel in Grad.
4*ArcTangent(1) gibt dir pi

Jetzt in JavaScript:

%Vor%

Oder wie von Maurice vorgeschlagen, verwenden Sie Math.atan2 :
%Vor%

Hier ist ein Beispiel:

%Vor% %Vor% %Vor%

Hier ist ein Fiddle , wenn Sie mobil sind.