Javascript：CSS轉換透視的矩陣運算

Question

我正在使用這個腳本聲稱實現了規范中描述的matrix3d操作，但是腳本缺少矩陣透視操作，所以我“熟”了一些我不確定是准確還是正確的東西。

// 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原型中。

更新：我已經找到了透視函數的另一個實現（見下文），並創建了一個小提琴，以證明它不能正常工作。

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文檔 ）中表示3d矩陣與在CSSMatrix polyfill 代碼中如何表示它。 該代碼使用文檔中表示的矩陣的轉置版本。 代碼正常工作，但代碼所指的是矩陣位置[3,4]實際上是位置[4,3]，如果我們考慮spec / docs中使用的maxtrix。

關於計算透視的公式：根據此處的MDN文檔，應使用/乘以以下矩陣來應用透視（ 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;

我在這里用固定代碼更新了小提琴。

Answer 2

根據'Perspective'屬性的規范，它只接受一個參數，即'length'。 它不接受X，Y和Z.

參考： W3ORG - 透視屬性

參考： W3School的透視示例

我知道，我沒有給你透視的解決方案，但所寫的並不是預期的行為。 如果我對您的問題的理解是錯誤的，請告訴我，我會盡力幫助您。 謝謝。