Как мне конкурировать матрицу преобразования, необходимую для преобразования прямоугольника в трапецию?

Question

Я играю с CSS Transforms и эквивалентными фильтрами в IE, и хочу имитировать перспективу, превращая 2D -прямоугольник в трапецию.

В частности, я хочу, чтобы правая сторона прямоугольника оставалась одинаковой высотой, а левая сторона, как говорилось, 80% от высоты, так что средние точки обеих сторон горизонтально соответствуют друг другу.

Я знаком с матричной алгеброй, но не могу думать, как определить, что сделает Матрица.

Answer 1

Для проекции я бы использовал матрицу 4x4:

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

Это работает на однородных координатах (D - это расстояние глаз от плоскости проекции, в стандартной настройке перспективы).

Альтернатива:

Чтобы не работать с однородными координатами (Или, если вы не можете использовать матрицы 4x4, или если вы не можете использовать аппаратное ускорение для матрицы преобразования), просто используйте это:

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

Кстати, это также в основном отвечает на ваш вопрос трапеции. Просто поместите прямоугольник в 3D -пространство - нетрудно понять, как: просто представьте прямоугольную живопись на стене с правой стороны. Затем опустите точку зрения, чтобы быть ровной с дном картины. Теперь он будет прогнозироваться как ваш трапециат.

Answer 2

Ах - думать немного больше, 2d Матричные преобразования могут только вращаться, перекоситься или преобразовать. Это означает, что линии, которые параллельны до преобразования, параллельны после этого.

Я оставлю этот вопрос здесь на случай, если кто -то еще попадет в ту же линию мышления!

Answer 3

Вы можете сделать это с помощью нового преобразования CSS3 Matrix3D, что даст вам возможность использовать вышеупомянутую матрицу 4x4.

Answer 4

Есть 2 ответа на это в:

Как исказить изображение, как это

Один для преобразования на основе полосы, который должен быть достаточно хорош для исходного вопроса (преобразовать прямоугольник в трапецию):

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

Другое немного сложнее, но позволяет пользовательскую преобразование на основе пикселей на основе матрицы 4x2 (преобразование прямоугольника в выпуклый четырехугольник, где каждый угол четырехугольника может быть определенным образом):

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