[Erledigt] Mathematische Berechungen im Gradnetz nach Rotation

F234k · 01.12.2011, 15:03

Hallo Forumler,

ich glaube, ich könnte diese Frage genauso gut in einem Mathematikforum stellen, aber ich hoffe auch hier Leute zu finden, die mir helfen können.

Folgendes:

Ich habe auf einer Seite eine Div-Box, die per Drag & Drop verschoben, rotiert und in der Größe geändert werden kann.
Das Verschieben, Rotieren und Größe ändern funktioniert ganz gut.
Ich rotiere die Box, indem ich die Mauskoordinaten hernehme und den Winkel der Rotation berechne und mittels CSS 3 rotate() dann drehe.
Um die Größe zu ändern bilde ich die Differenz der Anfangs- und Endmausposition und ändere die Werte von top, left, width und height.
So kann ich, wie z.B. in Photoshop an der rechten oberen Ecke klicken und die Box größer ziehen.

Das Problem ist jetzt, dass ich nach einer Rotation nicht mehr die einfache Berechnung der Differenz nutzen kann.
Ich will nun weiterhin die Möglichkeit bieten, die Höhe und Breite der Box zu verändern dabei ist ja aber alles um einen bestimmten Winkel gedreht.

Im Anhang ist ein Bild zum Szenario.

Gegeben sind alle schwarzen Werte, gesucht sind a und b. Und das ganze sollte beim weiteren rotieren immer noch funktionieren.
Man beachte auch dass die Mauspositionen von der linken oberen Ecke aus errechnet werden.

Wie komme ich an die Werte ran?

nikosch · 01.12.2011, 15:58

Berechne erst die Skalierung und dann die Rotation? Den Winkel relativ zur Ausgangslage musst Du Dir natürlich merken und weiterbenutzen.

F234k · 01.12.2011, 16:14

Zitat:

Zitat von nikosch

Berechne erst die Skalierung und dann die Rotation

Wie meinst du das konkret, wie soll ich den Winkel denn in die Berechung einfließen lassen? Den Winkel Alpha habe ich.

BlackScorp · 01.12.2011, 17:08

wenn du die transform methode in css verwendest für das rotieren dann kannst du doch auch scale nehmen oder etwa nicht?

F234k · 01.12.2011, 21:16

1. Habe ich dann bei der Berechnung das gleiche Problem.
2. Wird bei Scale auch der Inhalt der Box "gescaled", es soll sich aber nur Höhe und Breite ändern.

F234k · 01.12.2011, 22:22

Ich glaube ich hab es, die Idee von nikosch war schon richtig.

Ich nehme die einzelnen Punkte und drehe sie quasi am Kreis wieder in den Urzustand, also auf 0 Grad, führe dann die Berechnungen durch und drehe danach alle Punkte wieder zurück.

Gleichung für das Drehen:

x' = (x-mX) cos(beta) - (y-mY) sin(beta) + u
y' = (x-mX) sin(beta) + (y-mY) cos(beta) + v

Mal schauen, ob das was wird.

EDIT: Funktioniert, prima!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

01.12.2011, 15:03
F234k Benutzer Registriert seit: 18.04.2010 Beiträge: 35 PHP-Kenntnisse: Anfänger	[Erledigt] Mathematische Berechungen im Gradnetz nach Rotation Hallo Forumler, ich glaube, ich könnte diese Frage genauso gut in einem Mathematikforum stellen, aber ich hoffe auch hier Leute zu finden, die mir helfen können. Folgendes: Ich habe auf einer Seite eine Div-Box, die per Drag & Drop verschoben, rotiert und in der Größe geändert werden kann. Das Verschieben, Rotieren und Größe ändern funktioniert ganz gut. Ich rotiere die Box, indem ich die Mauskoordinaten hernehme und den Winkel der Rotation berechne und mittels CSS 3 rotate() dann drehe. Um die Größe zu ändern bilde ich die Differenz der Anfangs- und Endmausposition und ändere die Werte von top, left, width und height. So kann ich, wie z.B. in Photoshop an der rechten oberen Ecke klicken und die Box größer ziehen. Das Problem ist jetzt, dass ich nach einer Rotation nicht mehr die einfache Berechnung der Differenz nutzen kann. Ich will nun weiterhin die Möglichkeit bieten, die Höhe und Breite der Box zu verändern dabei ist ja aber alles um einen bestimmten Winkel gedreht. Im Anhang ist ein Bild zum Szenario. Gegeben sind alle schwarzen Werte, gesucht sind a und b. Und das ganze sollte beim weiteren rotieren immer noch funktionieren. Man beachte auch dass die Mauspositionen von der linken oberen Ecke aus errechnet werden. Wie komme ich an die Werte ran? Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.12.2011, 15:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Berechne erst die Skalierung und dann die Rotation? Den Winkel relativ zur Ausgangslage musst Du Dir natürlich merken und weiterbenutzen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.12.2011, 17:08
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	wenn du die transform methode in css verwendest für das rotieren dann kannst du doch auch scale nehmen oder etwa nicht? __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

01.12.2011, 21:16
F234k Benutzer Registriert seit: 18.04.2010 Beiträge: 35 PHP-Kenntnisse: Anfänger	1. Habe ich dann bei der Berechnung das gleiche Problem. 2. Wird bei Scale auch der Inhalt der Box "gescaled", es soll sich aber nur Höhe und Breite ändern.

01.12.2011, 22:22
F234k Benutzer Registriert seit: 18.04.2010 Beiträge: 35 PHP-Kenntnisse: Anfänger	Ich glaube ich hab es, die Idee von nikosch war schon richtig. Ich nehme die einzelnen Punkte und drehe sie quasi am Kreis wieder in den Urzustand, also auf 0 Grad, führe dann die Berechnungen durch und drehe danach alle Punkte wieder zurück. Gleichung für das Drehen: x' = (x-mX) cos(beta) - (y-mY) sin(beta) + u y' = (x-mX) sin(beta) + (y-mY) cos(beta) + v Mal schauen, ob das was wird. EDIT: Funktioniert, prima! Geändert von F234k (02.12.2011 um 19:00 Uhr).