关于javascript：将3X3转换矩阵转换为4X4矩阵以进行CSS转换matrix3d


Transform a 3X3 transform matrix to 4X4 matrix for css transform matrix3d

我有一个3X3变换矩阵，它是单应变换的输出。

我想根据此矩阵旋转和拉伸div，但看起来css变换要么接收4X4矩阵，要么接收2X3矩阵。

我试图通过在此处添加零和一个来转换3X3矩阵，但看起来完全不对(它会使div旋转90度，或者如果我进行转置，则太小了)。

如何转换3X3矩阵，使css \\'转换正确工作？

相关讨论

以下一些思想将对您有所帮助：

关于接收矩阵的几种可能性：

矩阵是2D变换矩阵：在这种情况下，矩阵扩展将失败，因为矩阵布局将如下所示：

1
2
3
[x1, x2, tx]
[y1, y2, ty]
[0 , 0 , 1 ]

对于一个4x4矩阵，假设X和Y轴不变，则扩展名看起来像这样：

1
2
3
4
[x1, x2, 0, tx]
[y1, y2, 0, ty]
[0 , 0 , 1, 0 ]
[0 , 0 , 0, 1 ]

但是由于css使用2x3矩阵，因此隐含了最后一行。因此，您可以像这样添加它们：transform: matrix(x1,y1,x2,y2,tx,ty);(请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix)

矩阵是3D旋转矩阵：在这种情况下，矩阵扩展将失败，因为矩阵布局如下所示：

1
2
3
[x1, x2, x3]
[y1, y2, y3]
[z1, z2, z3]

那么对于4x4矩阵，扩展名看起来像这样：(请参见问题中的链接)

1
2
3
4
[x1, x2, x3, 0]
[y1, y2, y3, 0]
[z3, z3, z3, 0]
[0 , 0 , 0 , 1]

您可以像这样添加它们：transform: matrix(x1,y1,z1,0, x2,y2,z2,0, x3,y3,z3,0, 0,0,0,1);(请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix)

最后的可能性：矩阵是一个射影矩阵。没有线索来解决这个问题。.

如果我不得不猜测：通过查看此示例(从您提供的链接中)，我会说这是2D转换矩阵。

请注意：jsfeat库的行优先顺序是行，但是css需要的行顺序是列！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var affine_kernel = new jsfeat.motion_model.affine2d();
var affine_transform = new jsfeat.matrix_t(3, 3, jsfeat.F32_t | jsfeat.C1_t);

var count = 33;
var from = [];
var to = [];
 
for(var i = 0; i < count; ++i) {
    from[i] = {"x":Math.random()*320,"y":Math.random()*240 };
    to[i] = {"x":from[i].x + 5,"y":from[i].y+5 };
}
affine_kernel.run(from, to, affine_transform, count);

var a = [...affine_transform.data.subarray(0 , 6)];
b = [
  0.08420821279287338,
  -0.03247755020856857,
  14.28314018249511,
  -0.009080140851438,
  0.11894367635250,
  7.15110540390014,
  -0.00034110905835,
  -0.01147077046,
  1
];

window.addEventListener('load', function(){
  var elem = document.getElementById('to-transform');
  elem.style.transform = 'matrix('+a[0]+','+a[3]+','+a[1]+','+a[4]+','+a[2]+','+a[5]+')';
 
  var mat = [b[0],b[3],0,b[6], b[1],b[4],0,b[7], 0,0,1,0, b[2],b[5],0,b[8] ]
  var elem1 = document.getElementById('to-transform2');
  elem1.style.transform = 'matrix3d('+mat.join(',')+')';
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
  width:200px;
  height:200px;
 
  background: #aaa;
  position:relative;
  float:left;
  margin-right:10px;
}

.to-transform {
  width:100px;
  height:100px;
  position:absolute;
 
  background: #a00;
  text-align: center;
  line-height: 92px;
}
1
2
3
4
5
6
7
<script type="text/javascript" src="https://inspirit.github.io/jsfeat/js/jsfeat-min.js">


  to-transform


  to-transform2

相关讨论