Question

我使用this script声称实现了the spec中描述的matrix3d操作，但是脚本缺少矩阵透视操作，所以我＆＃34; cooked＆＃34;我不确定的是准确还是正确。

// the perspective matrix to multiply with
CSSMatrix.Perspective = function(x, y, z){
  var m = new CSSMatrix();
  m.m13 = x;
  m.m23 = y;
  m.m33 = z;
  return m;
};

以及使用此矩阵的方法

// myMatrix.perspective(x,y,z); to apply a perspective matrix
CSSMatrix.prototype.perspective = function(x, y, z){
  if (y == null) y = 0;
  if (z == null) z = 0;
  return CSSMatrix.multiply(this, CSSMatrix.Perspective(x, y, z));
};

我的问题是，如果y和z是undefined，应该使用哪些值？它会像旋转，其中x用于所有其他轴，或0（零），如上面的代码？

我也不确定CSSMatrix.Perspective矩阵是否按照规范中的说明正确编写并实现到CSSMatrix原型中。

更新：我找到了透视函数的另一个实现（见下文）并创建了一个fiddle来证明它不能正常工作。

CSSMatrix.prototype.perspective = function(d){
  return CSSMatrix.multiply(this, CSSMatrix.Perspective(d));
};
CSSMatrix.Perspective = function(d){
  var m = new CSSMatrix(); 
  m.m43 = -1/d; 
  return m;
};

为什么两个值不同呢？

感谢您的回复。

Answer 1

这里的问题似乎是规范/文档（例如Mozilla CDN docs）中的3d矩阵与它在CSSMatrix polyfill code中的表示方式之间的关系。该代码使用文档中表示的矩阵的转置版本。代码正常工作但代码所指的是矩阵位置[3,4]实际上是位置[4,3]如果我们考虑spec / docs中使用的maxtrix。

关于计算透视的公式：根据MDN文档here，应使用/乘以以下矩阵来应用透视（d是透视值）：

a1 a2 a3 a4    1 0  0   0
b1 b2 b3 b4 =  0 1  0   0
c1 c2 c3 c4    0 0  1   0
d1 d2 d3 d4    0 0 −1/d 1

所以你沿着正确的道路前进，但由于polyfill的代码在内部引用矩阵的方式，你正在错误地构造透视矩阵。而不是m.m43 = -1/d;，请使用m.m34 = -1/d;

我已使用固定代码here更新了小提琴。

Answer 2

根据'Perspective'属性的规范，它只接受一个参数，即'length'。它不接受X，Y和Z.

参考：W3ORG - Perspective Property

参考：W3School's Perspective Example

我知道，我没有给你透视的解决方案，但所写的并不是预期的行为。如果我对您的问题的理解是错误的，请告诉我，我会尽力帮助您。感谢。

Javascript：CSS转换透视的矩阵运算

2 个答案: