Como faço para competir a matriz de transformação necessária para transformar um retângulo em um trapézio?

Question

Estou brincando com as transformações CSS e os filtros equivalentes no IE, e quero simular a perspectiva transformando um retângulo 2D em um trapézio.

Especificamente, quero que o lado direito do retângulo permaneça na mesma altura, e o lado esquerdo para ser 80% da altura, de modo que os pontos médios de ambos os lados estejam horizontalmente alinhados.

Estou familiarizado com a Álgebra Matrix, mas não consigo pensar em como determinar qual a Matrix fará isso.

Answer 1

Para projeção, eu usaria uma matriz 4x4:

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

Isso funciona com coordenadas homogêneas (D é a distância do olho do plano de projeção, em uma configuração de perspectiva padrão).

Alternativo:

Para evitar trabalhar com coordenadas homogêneas (ou se você não pode usar matrizes 4x4, ou se você não pode usar a aceleração de hardware para transformação da matriz de qualquer maneira), basta usar isso:

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

BTW, isso também responde basicamente à sua pergunta do trapézio. Basta colocar seu retângulo corretamente no espaço 3D - não é difícil descobrir como: imagine uma pintura retangular em uma parede no seu lado direito. Em seguida, abaixe o olho para estar nivelado com o fundo da pintura. Agora será projetado como seu trapézio.

Answer 2

Ah - pensando um pouco mais, 2d As transformações da matriz só podem girar, distorcer ou transformar. Isso significa que as linhas paralelas antes da transformação são paralelas posteriormente.

Vou deixar essa pergunta aqui, caso alguém mais cair na mesma linha de pensamento!

Answer 3

Você pode fazer isso com a nova transformação CSS3 Matrix3D, que lhe dará a capacidade de usar a matriz 4x4 acima mencionada.

Answer 4

Existem 2 respostas para isso:

Como distorcer a imagem como esta

Um para a transformação baseada em listras que deve ser boa o suficiente para a pergunta original (transforme retângulo em um trapézio):

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

O outro é um pouco mais complicado, mas permite a transformação personalizada baseada em pixels com base em uma matriz 4x2 (retângulo de transformação em um quadrilateral convexo, onde cada canto do quadrilátero pode ser definido personalizado):

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