Comment puis-je rivalise la matrice de transformation nécessaire pour transformer un rectangle en un trapèze?

Question

Je suis jouer avec des transformations de filtres et css équivalents dans IE, et que vous souhaitez simuler une perspective en transformant un rectangle 2d en trapèze.

Plus précisément, je veux que le côté droit du rectangle de rester à la même hauteur, et le côté gauche pour être dire 80% de la hauteur, de sorte que les points médians des deux côtés sont horizontalement alignées les unes aux autres.

Je connais l'algèbre matricielle, mais ne peut pas penser à la façon de déterminer ce que la matrice fera.

Answer 1

Pour la projection, j'utiliser une matrice 4x4:

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

Cela fonctionne sur des coordonnées homogènes (d est la distance de l'œil à partir du plan de projection, dans une configuration standard en perspective).

Alternative:

Pour éviter de travailler avec les coordonnées homogènes (ou si vous ne pouvez pas utiliser des matrices 4x4, ou si vous ne pouvez pas utiliser l'accélération matérielle pour la transformation de la matrice de toute façon) , il suffit d'utiliser ceci:

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

BTW, cela répond à votre question aussi essentiellement trapézoïdal. Il suffit de mettre correctement votre rectangle dans l'espace 3D - il n'est pas difficile de comprendre comment: Imaginez un tableau rectangulaire sur un mur à votre droite. Ensuite, baisser votre point d'oeil à être au niveau du bas du tableau. Maintenant, il sera projeté comme trapèzes.

Answer 2

Ah - penser un peu plus, 2d matrice ne peuvent transformées faire pivoter, incliner ou transformer. Cela signifie que les lignes parallèles avant transformation sont parallèles après.

Je vais laisser cette question ici au cas où quelqu'un d'autre tombe dans la même ligne de pensée!

Answer 3

Vous pouvez accomplir cela avec le nouveau CSS3 matrix3D transformer ce qui vous donnera la possibilité d'utiliser la matrice 4x4 indiquée ci-dessus.

Answer 4

Il y a 2 réponses pour en:

comment biaiser l'image comme celui-ci

L'une pour la transformation à base de bande qui devrait être assez bon pour la question initiale (Transform rectangle à un trapèze):

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

L'autre est un peu plus compliqué, mais permet la transformation à base de pixels personnalisé basé sur une matrice de 4x2 (transformer rectangle à un quadrilatère convexe où chaque coin du quadrilatère peut être défini sur mesure):

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