スキュー角と回転角のある座標を使って矩形を描く方法は？

Question

結果がフレームに完全に一致しませんでした。 4座標でキャンバスステージ上にrectを描画するにはどうすればよいですか？

与えられた座標が少し斜めの角度を持っている、斜めの角度で描画するのに失敗した、4座標の斜め角度を計算する方法を知らなかった これは私がこれまでに得ることができるものです。角度。何が私は逃したのですか？あなたは私の数学がある、私は高校生です。..

をhtmlコードをコピーして、その結果を参照してください。..

Thisは三角形でスキュー角をcalcuteする方法について説明しますが、どのように矩形でそれを使用することができますとてもよく、私を許してくださいません... :(

おかげ..

var _width, _height; 
 
var img = new Image(); 
 
var img2 = new Image(), 
 
    img2Widht = 0, 
 
    img2Height = 0; 
 
img.src = "http://production.manboker.com/share/1.jpg"; 
 
var canvas = document.getElementById("canvas"); 
 
img.onload = function() { 
 
    canvas.width = _width = this.width; 
 
    canvas.height = _height = this.height; 
 
    img2.src = "http://production.manboker.com/share/2.png"; 
 
    img2.onload = function() { 
 
    step1(); 
 
    } 
 
} 
 

 
var coor = { 
 
    leftTop: ["92", "569"], 
 
    rightTop: ["672", "569"], 
 
    leftBottom: ["109", "1437"], 
 
    rightBottom: ["723", "1437"] 
 
} 
 

 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
function step1() { 
 
    ctx.clearRect(0, 0, _width, _height); 
 
    ctx.globalCompositeOperation = 'source-over'; 
 
    ctx.drawImage(img, 0, 0); 
 
    ctx.globalCompositeOperation = "multiply"; 
 
    ctx.save(); 
 
    ctx.translate(coor['leftTop'][0], coor['leftTop'][1]); 
 
    ctx.rotate(radian(coor['leftTop'], coor['leftBottom'])); 
 
    img2Widht = distance(coor['leftTop'], coor['rightTop']); 
 
    img2Height = distance(coor['leftTop'], coor['leftBottom']); 
 
    ctx.drawImage(img2, 0, 0, img2Widht, img2Height); 
 
    ctx.restore(); 
 
} 
 

 
function distance(a, b) { 
 
    var x = b[0] - a[0], 
 
    y = b[1] - a[1]; 
 
    return Math.sqrt(x * x + y * y); 
 
} 
 

 
function radian(a, b) { 
 
    return Math.atan2(a[0] - b[0], b[1] - a[1]); 
 
}

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
}

<canvas id="canvas" style="position:absolute;"></canvas>

Answer 1

フラットイメージをフレームの3D写真に正しく収めるには、一般的に、回転とスキュー（またはより一般的なアフィン変換）が必要ではなく、射影変換が必要です。このような変換は、これらのうち3つが共通線上に存在しない限り、4点の画像によって一意的に定義される。数学SEのFinding the Transform matrix from 4 projected points (with Javascript)とここではRedraw image from 3d perspective to 2dは、私がそれを行う方法を説明する答えです。