¿Cómo compito la matriz de transformación necesario para transformar un rectángulo en un trapecio?

Question

Me estoy jugando con transformaciones CSS y los filtros equivalentes en IE, y quieren simular perspectiva mediante la transformación de un rectángulo 2D en un trapecio.

En concreto, quiero que el lado derecho del rectángulo para estar a la misma altura, y el lado izquierdo de ser que el 80% de la altura, de manera que los puntos medios de dos lados son horizontalmente en línea entre sí.

Estoy familiarizado con el álgebra de matrices, pero no se me ocurre cómo determinar lo que va a hacer que la matriz.

Answer 1

Para la proyección, que haría uso de una matriz 4x4:

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

Esto funciona en coordenadas homogéneas (d es la distancia del ojo desde el plano de proyección, en una configuración de perspectiva estándar).

Alternativa:

Para evitar trabajar con coordenadas homogéneas (o si no se puede utilizar matrices de 4x4, o si no se puede utilizar la aceleración de hardware para la transformación de la matriz de todos modos) , sólo tiene que utilizar esto:

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

Por cierto, esto también responde básicamente a su pregunta trapecio. Sólo hay que poner el rectángulo correctamente en el espacio 3D - que no es difícil de encontrar la manera: Imagínese un cuadro rectangular en una pared a su lado derecho. Luego baje su punto de ojo para estar a nivel con la parte inferior del cuadro. Ahora se proyecta como el trapecio.

Answer 2

Ah - pensar un poco más, 2d las transformaciones de matriz sólo pueden rotar, sesgar o transformar. Eso significa que las líneas que son paralelas antes de la transformación son paralelos después.

Voy a dejar esta pregunta aquí en caso de cualquier otra persona cae en la misma línea de pensamiento!

Answer 3

Esto se puede hacer con el nuevo CSS3 matrix3D transformar lo que le dará la posibilidad de utilizar la matriz de 4x4 antes mencionado.

Answer 4

Hay 2 respuestas para ello en:

cómo sesgar imagen como esta

Uno para la transformación basada en la franja que debe ser lo suficientemente bueno para la pregunta original (rectángulo para transformar un trapezoide):

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

El otro es un poco más complicado, pero permite la transformación basado en píxeles personalizado basado en una matriz de 4x2 (rectángulo transformar a un cuadrilátero convexo, donde puede ser definida de forma personalizada cada esquina del cuadrilátero):

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