6

我正在尝试使用<canvas>(2d 上下文)渲染 3D 形状,这意味着我必须执行一些手动投影变换。

能够从 CSS 中检索 3D 转换矩阵值对我有很大帮助。

这可以做到吗?

如果没有,我该如何构建由-webkit-perspective-origin 执行的转换?我已经计算出仅针对透视的转换,但是透视原点位于 x=y=0,但情况并非总是如此。

我意识到这种特定情况(在某个点 x、y、z 的原点透视)可能会变成简单的 x、y、z 平移,然后是透视变换(或相反),但理想的答案是是一种提取实际 4x4 3D 矩阵的方法。如果我有矩阵,我不再需要重新跟踪我为转换 CSS3 元素所做的步骤,以便将相同的转换应用于我打算使用<canvas>.

我在这里(http://www.w3.org/TR/css3-3d-transforms/)查看以供参考,但看起来它们并没有描述在应用不同的可能转换时分配给矩阵的实际值。我认为应该有一些规格表可以详细说明。我似乎记得我什至在某处瞥见了它(具有大量三角函数的矩阵定义)。

编辑:我在这里找到了浏览器执行转换步骤的更深入概述。没有回答我的问题,但它确实让我离我的临时目标更近了一步。

4

1 回答 1

4

可以通过 getComputedStyle 检索元素的变换矩阵。这是一个例子:http: //jsfiddle.net/Kxxwu/

另一种方法是使用 WebKitCSSMatrix 接口。它非常方便,它提供了一个具有矩阵值的对象以及一些方法:http: //developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html

不好的部分是 WebKitCSSMatrix 没有在其他浏览器中实现......

想看看您如何将 3d 转换为画布。偷看的好地方是three.js。他们已经做到了,您可以在那里看到各种矩阵函数。

祝你好运!

于 2012-05-02T10:25:07.153 回答