Javascript：CSS转换透视的矩阵运算 [英] Javascript: matrix operations for CSS transform perspective

问题描述

我正在使用声称实施matrix3d操作的此脚本如规范中所述，脚本缺少矩阵透视操作，所以我熟了一些我不确定是准确还是正确的东西。

I'm using this script that claims to implement matrix3d operation as described in the spec, however the script is missing matrix perspective operations, so I "cooked" something I'm not sure is either accurate or correct.

// 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（零），如上面的代码？

My question is, if y and z are undefined, what values should be used? Is it gonna be like rotate where x is used for all other axis, or 0 (zero) as in the above code?

我也不确定 CSSMatrix.Perspective 矩阵是否按照规范中的描述正确编写并实现到 CSSMatrix prototype。

I'm also not sure if CSSMatrix.Perspective matrix is properly written as described in the spec and implemented into the CSSMatrix prototype.

UPDATE：
我发现了透视函数的另一个实现（见下文）并创建了一个小提琴以证明它不能正常工作。

UPDATE: I've found another implementation of the perspective functions (see below) and created a fiddle to demonstrate it's not working as well.

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;
};

为什么这两个值不同？

感谢您的回复。

推荐答案

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

The issue here seems to be how the 3d matrix is represented in the spec/docs (e.g. Mozilla CDN docs) vs how it's represented in the CSSMatrix polyfill's code. The code uses a transposed version of the matrix represented in the docs. The code works correctly but what the code refers to as the matrix position [3,4] is actually position [4,3] if we consider the maxtrix used in the spec/docs.

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

Regarding the formula for calculating perspective: as per the MDN docs here, the following matrix should be used/multiplied for applying the perspective (d is the perspective value):

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;

So you were along the right path, but you were contructing the perspective matrix incorrectly because of the way the polyfill's code references the matrix internally. Instead of m.m43 = -1/d;, use m.m34 = -1/d;

我用固定代码更新了小提琴这里。

I've updated the fiddle with the fixed code here.

这篇关于Javascript：CSS转换透视的矩阵运算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！