CODEWITHSUNDEEP
csscomputer-visionlinear-algebraprojectionkeystone
amitos80
amitos80

Reputation: 193

projection keystone algorithm

I'm looking for a way to keystone div. I need to calculate the transform matrix for keystone correction. Assume the angle of the projection is given and the projection surface is always vertical. (The code below demonstrates a private case for a specific angle)

enter image description here

(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);
})();
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;
}
<body>
<div class="stage"></div>

Upvotes: 2

Views: 560

Answers (0)

Related Questions