Css 投影梯形算法_Css_Computer Vision_Linear Algebra_Projection_Keystone

Css 投影梯形算法

css computer-vision

Css 投影梯形算法,css,computer-vision,linear-algebra,projection,keystone,Css,Computer Vision,Linear Algebra,Projection,Keystone,我正在寻找一种方法来解决这个问题。我需要计算变换矩阵，以进行keystone校正。假设给定了投影角度，且投影面始终垂直。（下面的代码演示了特定角度的私人案例）身体{ 填充：0；保证金：0； } .舞台{ 宽度：480px；高度：270px；背景：url(http://placekitten.com/480/270)不重复；背景尺寸：封面；变换原点：0px 0px 0px； } （功能（）{ 功能键校正给定角度（度）{ //计算变换矩阵以纠正keystone效应 //示例返回返

我正在寻找一种方法来解决这个问题。我需要计算变换矩阵，以进行keystone校正。假设给定了投影角度，且投影面始终垂直。（下面的代码演示了特定角度的私人案例）


身体{
填充：0；
保证金：0；
}
.舞台{
宽度：480px；
高度：270px；
背景：url(http://placekitten.com/480/270)不重复；
背景尺寸：封面；
变换原点：0px 0px 0px；
}
（功能（）{
功能键校正给定角度（度）{
//计算变换矩阵以纠正keystone效应
//示例返回
返回[
0.840637, 0, 0, 0,
-0.136986, 0.737898, 0, -0.000545762,
0, 0, 1, 0,
40, 30, 0, 1
];
}
功能转换阶段（度）{
var矩阵=KeyneCorrectionGiveNangle（度）；
var stage=document.querySelector（'.stage'）；
stage.style.transform='matrix3d（'+matrix.join（'，'）+'）；
}
转化期（10）；
})();

您的小提琴链接已断开。不管怎样，请你发布相关代码好吗？@amitos80你的问题是什么？@Stiliyan-完善了我的问题

<!doctype html>
<html>
<head>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    .stage {
      width: 480px;
      height: 270px;
      background: url(http://placekitten.com/480/270) no-repeat;
      background-size: cover;
      transform-origin: 0px 0px 0px;
    }
  </style>
</head>
<body>
<div class="stage"></div>
<script>
(function() {
  function keystoneCorrectionGivenAngle(degrees) {
    // figure out the transform matrix to correct the keystone effect

    // example return
    return [
      0.840637, 0, 0, 0,
      -0.136986, 0.737898, 0, -0.000545762,
      0, 0, 1, 0,
      40, 30, 0, 1
    ];
  }
  function transformStage(degrees) {
    var matrix = keystoneCorrectionGivenAngle(degrees);
    var stage = document.querySelector('.stage');
    stage.style.transform = 'matrix3d(' + matrix.join(', ') + ')';
  }
  transformStage(10);
})();
</script>
</body>
</html>