matrix - 如何竞争将矩形转换为梯形所需的转换矩阵？

Question

我正在玩 IE 中的 css 转换和等效过滤器，并希望通过将 2d 矩形转换为梯形来模拟透视。

具体来说，我希望矩形的右侧保持相同的高度，左侧为高度的 80%，以便两侧的中点水平对齐。

我熟悉矩阵代数，但想不出如何确定哪个矩阵可以做到这一点。

score 3 · Accepted Answer

对于投影，我会使用 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 空间中 - 不难弄清楚如何：想象一下您右手边墙上的矩形画。然后降低你的眼点，使其与画的底部齐平。现在它将被投影为您的梯形。

score 1 · Accepted Answer

啊——再想一想，二维矩阵变换只能旋转、倾斜或变换。这意味着在转换之前平行的线在之后是平行的。

我会把这个问题留在这里，以防其他人也有同样的想法！

score 0 · Accepted Answer

您可以使用新的 CSS3 matrix3d 转换来完成此操作，这将使您能够使用上述 4x4 矩阵。

score 0 · Accepted Answer

有2个答案：

一个用于基于条纹的转换，对于原始问题应该足够好（将矩形转换为梯形）：

另一个稍微复杂一些，但允许基于 4x2 矩阵的自定义基于像素的转换（将矩形转换为凸四边形，其中四边形的每个角都可以自定义）：

4 回答 4