Wie kann ich konkurrieren die Transformationsmatrix transformieren mussten, ein Rechteck in ein Trapez?

Question

Ich bin Herumspielen mit css-Transformationen und der entsprechende Filter im IE, und wollen, um zu simulieren Perspektive durch die Umwandlung eines 2d-Rechteck in ein Trapez.

Speziell möchte ich die Rechte Seite des Rechtecks bleiben die gleiche Höhe, und die linken werden sagen, dass 80% der Höhe, so dass die Mitte der Punkte beider Seiten sind horizontal in einer Linie mit jeder andere.

Ich bin vertraut mit der matrix-algebra, aber kann sich nicht vorstellen, wie um zu bestimmen, welche matrix wird das tun.

Answer 1

Für die Projektion, würde ich die Verwendung einer 4x4-matrix:

1    0    0    0
0    1    0    0
0    0    0    0
0    0    1/d  1

Dies funktioniert auf homogenen Koordinaten (d ist der Abstand des Auges von der Projektionsfläche, in einem standard-Perspektive setup).

Alternative:

Um zu vermeiden, arbeiten mit homogenen Koordinaten (oder, wenn Sie nicht verwenden können, 4x4-Matrizen, oder wenn Sie nicht verwenden können, die hardware-Beschleunigung für matrix-transformation, eh), verwenden Sie diese:

x' = (d*x)/(z+d)
y' = (d*y)/(z+d)
z' = 0 (it's always projected onto the projection plane)

BTW, dies auch im Grunde beantwortet Ihre Trapez-Frage.Legen Sie einfach Ihre Rechteck korrekt in der 3D-Raum - es ist nicht schwer, herauszufinden, wie:Stell dir vor, ein rechteckiges Bild auf einer Wand zu Ihrer rechten Seite.Senken Sie dann Ihr Auge Punkt zu Ebene mit der Unterseite der Malerei.Jetzt wird es werden projiziert, als Ihr Trapez.

Answer 2

Ah - denken ein wenig mehr, 2d matrix-Transformationen können nur drehen, verzerren oder transformieren Sie.Das bedeutet, dass Linien, die parallel sind, bevor transformation parallel sind danach.

Ich lasse diese Frage hier in den Fall, dass jemand anderes fällt in die gleiche Linie des Denkens!

Answer 3

Dies können Sie erreichen mit den neuen CSS3-matrix3d verwandeln, die Ihnen die Möglichkeit zur Nutzung der oben genannten 4x4-matrix.

Answer 4

Es gibt 2 Antworten für Sie in:

wie skew Bild wie dieses

Eine für die stripe-basierte transformation, das sollte gut genug für die ursprüngliche Frage (Transformation Rechteck ein Trapez):

https://stackoverflow.com/a/10427836/6336464

Der andere ist ein bisschen komplizierter, aber können Sie benutzerdefinierte pixel-basierte transformation basiert auf einem 4x2 matrix (Umwandlung Rechteck zu einer konvexen viereck, wo jeder Ecke des Vierecks können vom Benutzer festgelegt werden):

https://stackoverflow.com/a/37236664/6336464