Question

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

我想根据此矩阵旋转和拉伸div，但它看起来像css transform either receives a 4X4 matrix or a 2X3 matrix。

我试图通过添加零和here之类的转换来转换3X3矩阵，但它看起来非常错误（它要么将div旋转90度，要么我进行转置，太小））。

如何转换3X3矩阵，使css＆＃39;变换会正常工作吗？

Answer 1

这里有一些可以帮助你的东西：

您回忆的矩阵有几种可能性：

矩阵是一个二维变换矩阵：在这种情况下，你做的矩阵扩展会失败，因为矩阵布局将如下所示：

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

假设X和Y轴没有变化，那么对于4x4矩阵，扩展将看起来像这样：

[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旋转矩阵：在这种情况下，你做的矩阵扩展会失败，因为矩阵布局将如下所示：

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

对于4x4矩阵，扩展名看起来像这样:(请参阅问题中的链接）

[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转换矩阵

BE AWARE：jsfeat lib有行主要订单，但css需要列主要订单！

＆＃13;

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(',')+')';
})

＆＃13;

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

＆＃13;

<script type="text/javascript" src="https://inspirit.github.io/jsfeat/js/jsfeat-min.js"></script>

<div class="container">
  <div id="to-transform" class="to-transform">to-transform</div>
</div>
<div class="container">
  <div id="to-transform2" class="to-transform">to-transform2</div>
</div>

＆＃13;

将3X3变换矩阵变换为4X4矩阵，用于css变换matrix3d

1 个答案: