Objekt drehen

[ritschmanhard]

Hi Rolf!

Leider kann man mittels aktuellem CSS keine freie Rotation definieren - deshalb geht das, was du vorhast nur auf Umwegen:
0) Entscheide, welche "Ausrichungs- Winkelgenauigkeit" du benötigst, d.h. (K=Klickposition, O=Objekt, /_ Winkel )

******************
***********K******
**********/*******
*********/********
********O---------
******************

Dies ist wichtig, da du für jedes Winkelinterval ein Bild von K anfertigen mußt, d.h. für Genauigkeit 10° z.B. 36 Bilder.

1. Erstelle mittels eines Zeichenprogramms die Benötigte Anzahl Bilder (z.B. im jpg Format) mit jeweiliger Rotation, benenne sie Flugzeug_0.jpg, Flugzeug_10.jpg,...,Flugzeug_350.jpg.

2. Halte die (absolute) Position (xO,yO) des Objekts im Objekt vor. Erfolgt nun ein Klick, so ermittle die (absolute) Position xM, yM des Klicks. Beachte Hierbei, dass entgegen normalen Koordinatensystemen der Ursprung (0,0) auf dem Bildschirm links oben liegt und y nach unten größer wird!

3. Berechne nun den Winkel (alpha):
   dY = yO - yM (gedreht wegen inverser yAchse)
   dX = yM - yO
   Fall 1: dX=0 =>
      dY > 0: alpha = 90
      dY = 0: undefined, Klick auf Objekt mittig => Ausrichtung nach belieben
      dY < 0: alpha = 180
   Fall 2: dX != 0:
   tan(alpha) = dY/dX
   alpha = arctan(dY/dX)

4. Runde alphaR = Math.round(alpha...) auf deine Winkelgenauigkeit

5. Ersetze nun das gezeigte Bild mit Javascript: myFlugzeug.src = "./Flugzeug_"+alphaR+".jpg";

Viele Grüsse,
Richard

P.S. Mathefehler sind nicht ausgeschlossen, dashalb wie immer: Alle Angaben ohne Gewähr...