Come faccio a competere la matrice di trasformazione necessaria per trasformare un rettangolo in un trapezio?

Question

Sto giocando intorno con trasforma CSS ed i filtri equivalenti in IE, e si vuole simulare la prospettiva trasformando un rettangolo 2D in un trapezio.

In particolare, voglio il lato destro del rettangolo di rimanere alla stessa altezza, e il lato sinistro per essere dire 80% dell'altezza, in modo che i punti medi di entrambe le parti sono orizzontalmente in linea tra loro.

ho familiarità con l'algebra delle matrici, ma non riesco a pensare come determinare che cosa matrice lo farà.

Answer 1

Per la proiezione, userei una matrice 4x4:

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

Questo funziona su coordinate omogenee (d è la distanza dell'occhio dal piano di proiezione, in una configurazione prospettiva standard).

Alternativa:

Per evitare di lavorare con coordinate omogenee (oppure se non è possibile usare matrici 4x4, o se non è possibile utilizzare l'accelerazione hardware per la trasformazione di matrice comunque) , basta usare questo:

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

A proposito, anche questo risponde alla tua domanda in sostanza trapezio. Basta mettere il rettangolo correttamente nello spazio 3D - non è difficile capire come: Provate a immaginare un dipinto rettangolare su un muro a destra. Poi abbassare il punto di osservazione per essere a livello con la parte inferiore del dipinto. Ora sarà proiettato come il vostro trapezio.

Answer 2

Ah - pensando un po 'di più, 2d le trasformazioni di matrice non può che ruotare, inclinare o trasformare. Ciò significa che le linee parallele prima trasformazione sono parallele in seguito.

Lascio questa domanda qui nel caso qualcuno altro cade nella stessa linea di pensiero!

Answer 3

È possibile raggiungere questo obiettivo con la nuova CSS3 Matrix3D trasformare che vi darà la possibilità di utilizzare la matrice 4x4 di cui sopra.

Answer 4

Ci sono 2 risposte per in:

come inclinare immagine come questo

Una per la trasformazione stripe-based che dovrebbe essere abbastanza buona per la domanda iniziale (trasformare rettangolo per un trapezio):

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

L'altro è un po 'più complicato ma permette trasformazione basato sui pixel personalizzato basato su una matrice 4x2 (trasformare rettangolo ad un quadrilatero convesso dove ogni angolo del quadrilatero può essere personalizzato definito):

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