Rotationsmatrix über beliebigen Punkt

Question

Standardmäßig verwendet die Rotationsmatrix den Ursprungspunkt als Mittelpunkt der Rotation. Um einen beliebigen Punkt zu drehen, müssen Sie den Abstand zum Ursprung mithilfe einer Translationsmatrix subtrahieren, die Rotation durchführen und dann zurück übersetzen. Aber das scheint mir nicht so gut zu gehen. Ich habe den folgenden Code (davon ausgehen, mein Ziel ist 100x100 mit einem Zentrum bei 50,50):

t = IDENTITY; 
t = translate(t, -50, -50); 
t = rotate(t, theta); 
t = translate(t, 50, 50); 

Leider, wenn ich diese Matrix t auf mein Objekt verwandelt anwenden, wird das Objekt falsch positioniert.

ich eine schnelle jsfiddle implementiert haben, mein Problem zu demonstrieren: http://jsfiddle.net/9M3uy/67/

Im JSFiddle drehte sich die rote Quadrat ist, wo die Rotation (mit freundlicher Genehmigung von der CSS3 gebaut in transformations Herkunft) am Ende haben sollte, und die blau gedrehtes Quadrat ist, wo meine Berechnung endet (das Grün wäre das ursprüngliche nicht gedrehte Quadrat gewesen).

Irgendwelche Ideen? Versteh ich einfach nicht, wie Übersetzen, Drehen, Übersetzen der Mechanik funktioniert oder mache ich etwas schrecklich falsch?

Answer 1

Es gibt zwei Probleme im Code:

1. Die Matrix-Multiplikationen in umgekehrter Reihenfolge durchgeführt werden, als Sie wahrscheinlich beabsichtigen. Es sieht so aus, als ob Sie beabsichtigen, rotate(t, theta) eine Matrix zurückzugeben, die t gefolgt von einer Rotation anwendet, aber in Wirklichkeit ist es das Gegenteil - die Rotation wird vor t angewendet. Sie müssen die Parameterreihenfolge in den Aufrufen von matrixMultiply in rotate und translate umkehren.

2. Die Parameter der CSS-Funktion matrix sind in der falschen Reihenfolge. Es sollte a11, a21, a12, a22, a13, a23 sein. Was Sie passieren, ist a11, a12, a21, a22, a13, a23.

Hier ist die fixed version.

Answer 2

Versuchen Sie zunächst, die "Standard" 3x3-Matrixmultiplikation für 2d-Fälle zu implementieren und erst danach, die Elemente zu optimieren, die sich aus der Multiplikation mit Null ergeben. Es ist ein bisschen schwer zu sehen, ob die Formeln korrekt sind, wenn das Indexierungsschema viel zu unorthodox ist.

Die Rotationsmatrix = [c -s 0; s c 0; 0 0 1]; Die Übersetzungsmatrix = [1 0 x; 0 1 y; 0 0 1];

Ich muss annehmen, css-translation Funktion nimmt auch 3x3 Ergebnis.

Sowohl die Multiplikation als auch die Rotation wird durchgeführt, indem Vektoren (x, y, 1) mit der entsprechenden Matrix multipliziert werden.

EDIT: Nach ein wenig das Hantieren, scheint es, dass entweder die Matrix m übersetzt werden sollen, oder die Betreiber als return MatMul([rot matrix],m) and return MatMul([trans matrix],m)

EDIT2 definiert werden könnten: Jetzt kann ich etwas seltsam sehen: nur durch die Übersetzung + -50, + -50 und rotieren um ~ 10 Grad, die Ecke bleibt nicht in der Mitte des roten Quadrats. Aber verstehe das Format der CSS-Matrix sowieso nicht. Sorry ...