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

Question

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

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

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

Answer 1

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

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)

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

Answer 2

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

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

Answer 3

На это есть 2 ответа:

как наклонить изображение вот так

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

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

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

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

Answer 4

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