从方坐标到 CSS matrix3d()

Question

我遇到了一个问题：

让我们考虑一个正在移动的表面上的正方形（在视频中）。 所以请记住它并不总是一个平面，它可以倾斜、旋转等。

现在，我正在使用 Aruco JS 检测它并获取其 4 个角的坐标 (x,y)。我很确定，从这个坐标开始，我可以使用 transform: matrix3d();.

渲染转换

事实是：我对数学知识，尤其是三角学的知识大约为 0。我真的会学习/理解这一点。

总结：有了实时正方形角的坐标，如何使用 CSS transform 属性将转换应用于另一个元素？

这是我到目前为止所做的一些事情（此代码在 window.requestAnimationFrame 中执行）：

  console.log('rotation : ', rotation[0], rotation[1], rotation[2]);
  console.log('translation : ', translation);
  var dimensions = {
    width: lineDistance(corners[0], corners[1]),
    height: lineDistance(corners[0], corners[3])
  }, center = {
    x: corners[0].x + (corners[1].x - corners[0].x)/2,
    y: corners[0].y + (corners[3].y - corners[0].y)/2
  }, rotateAngle = angle(corners[0].x, corners[0].y, corners[1].x, corners[1].y),
    rotateXangle = parseInt(rotation[1][2]);

    img.style.top = corners[0].y;
    img.style.left = corners[0].x;

  img.style.width = dimensions.width;
  img.style.height = dimensions.height;
  img.style.transform = 'rotate('+rotateAngle+'deg) rotateX('+Math.asin(-rotateXangle)+'deg) rotateY('+-Math.atan2(rotation[0][2], rotation[2][2])+'deg) rotateZ('+Math.atan2(rotation[1][0], rotation[1][1])+'deg)';

Answer 1

此问题的核心已在 Math Stack Exchange 上提出，标题为 Finding the Transform matrix from 4 projected points (with Javascript)。我在那里的回答也应该满足您的需求。再加上更好的数学类型设置将使事情更容易阅读。

从方坐标到 CSS matrix3d()

From square coordinates to CSS matrix3d()

javascript

css

math

trigonometry