1
正方形の3次元表示の4点を選択して画像のパースペクティブを修正し、それらの点を2次元正方形にマッピングしたいと考えています。javascriptを使用してCSSに射影変換を適用してパースペクティブを修正する
私は、元の例と同様にjsfiddle上のものの私適応され、ここで、2つの非常に豊富な例が続いているが、所望の結果を再現することができなかった：
example 1（article describing the solution）：この例ビデオのパースペクティブを修正する方法を（CoffeeScriptで）示しています。この例は、私が必要とするものと非常によく似ています。 my jsfiddle adaptation
var srcImg, width, height, srcCvs, srcC, srcRect, dstCvs, dstC, widthToHeight; var nbClicks = 0, coordinates = Array(8); srcImg = document.getElementById('sourceImg'); widthToHeight = srcImg.width/srcImg.height; srcCvs = document.getElementById('sourceCanvas'); srcC = srcCvs.getContext('2d'); dstCvs = document.getElementById('destinationCanvas'); dstC = dstCvs.getContext('2d'); width = srcCvs.width = dstCvs.width = srcCvs.clientWidth; height = srcCvs.height = dstCvs.height = srcCvs.clientWidth/widthToHeight; srcRect = srcCvs.getBoundingClientRect(); srcC.strokeStyle = '#0f0'; srcC.drawImage(srcImg, 0, 0, width, height); srcCvs.addEventListener('click', doClick, false); function doClick(event) { if (nbClicks < 4) { coordinates[ nbClicks * 2 ] = (event.clientX - srcRect.left) * width/srcRect.width; coordinates[ nbClicks * 2 + 1 ] = (event.clientY - srcRect.top) * height/srcRect.height; srcC.strokeRect(coordinates[ nbClicks * 2 ] - 10, coordinates[ nbClicks * 2 + 1 ] - 10, 20, 20); } if (++nbClicks == 4) { dstC.beginPath(); dstC.moveTo(coordinates[ 0], coordinates[ 1 ]); for(i = 1; i < 4; i ++) { dstC.lineTo(coordinates[ i*2 ], coordinates[ i*2 + 1 ]); } dstC.closePath(); dstC.clip(); var t = getTransform(left, top, w, h); dstCvs.style.visibility = 'visible'; dstC.drawImage(srcImg, 0, 0, width, height); var left = 0, top = 0, w = width, h = width; srcC.strokeStyle = '#f00'; srcC.strokeRect(left - 10, top - 10, 20, 20); srcC.strokeRect(left + w - 10, top - 10, 20, 20); srcC.strokeRect(left + w - 10, top + h - 10, 20, 20); srcC.strokeRect(left - 10, top + h - 10, 20, 20); alert('Clipped image is now drawn, going to apply transform after this alert.'); var t = getTransform(left, top, w, w); dstCvs.style.transform = t; } }; function getTransform(left, top, w, h) { var minX = Math.min(coordinates[ 0 ], coordinates[ 6 ]); var minY = Math.min(coordinates[ 1 ], coordinates[ 3 ]); var w = Math.max(Math.abs(coordinates[ 2 ] - coordinates[ 0 ]), Math.abs(coordinates[ 6 ] - coordinates[ 4 ])); var h = Math.max(Math.abs(coordinates[ 3 ] - coordinates[ 1 ]), Math.abs(coordinates[ 7 ] - coordinates[ 5 ])); var c = coordinates; for (var i = 0; i < 4; i ++) { c[ i * 2 ] = coordinates[ i ] - minX; c[ i * 2 + 1 ] = coordinates[ i * 2 + 1 ] - minY; } var l=t=0; var from = c; var to = [ left, top, left + w, top, left + w, top + h, left, top + h ]; A = []; b = []; for (var i = 0; i < 4; i ++) { A.push([ from[ i * 2 ], from[ i * 2 + 1 ], 1, 0, 0, 0, -from[ i * 2 ] * to[ i * 2 ], -from[ i * 2 + 1 ] * to[ i * 2 ] ]); A.push([ 0, 0, 0, from[ i * 2 ], from[ i * 2 + 1 ], 1, -from[ i * 2 ] * to[ i * 2 + 1 ], -from[ i * 2 + 1 ] * to[ i * 2 + 1 ] ]); b.push(to[ i * 2 ]); b.push(to[ i * 2 + 1 ]); } h = numeric.solve(A, b); H = [[h[0], h[1], 0, h[2]], [h[3], h[4], 0, h[5]], [ 0, 0, 1, 0], [h[6], h[7], 0, 1]]; return "matrix3d(" + H.join(", ") + ")"; }example 2（article describing the solution）：ここでの私の適応がある、あなたは4つのコーナーはチェス盤の左上隅から始まる時計回りにクリックする必要があります。この例では、その要素に視点を適用する方法を示します私の問題はこれの逆です。しかし、一般的な変換はある点の集合を別の点に適用するので、これは同等でなければならないと私は理解しています...しかし、おそらくどこかで間違っています！ただ、できるだけ明確にしようとするmy jsfiddle adaptation
var srcImg, width, height, srcCvs, srcC, srcRect, dstCvs, dstC, widthToHeight; var nbClicks = 0, coordinates = Array(8); srcImg = document.getElementById('sourceImg'); widthToHeight = srcImg.width/srcImg.height; srcCvs = document.getElementById('sourceCanvas'); srcC = srcCvs.getContext('2d'); dstCvs = document.getElementById('destinationCanvas'); dstC = dstCvs.getContext('2d'); width = srcCvs.width = dstCvs.width = srcCvs.clientWidth; height = srcCvs.height = dstCvs.height = srcCvs.clientWidth/widthToHeight; srcRect = srcCvs.getBoundingClientRect(); srcC.strokeStyle = '#0f0'; srcC.drawImage(srcImg, 0, 0, width, height); srcCvs.addEventListener('click', doClick, false); function doClick(event) { if (nbClicks < 4) { coordinates[ nbClicks * 2 ] = (event.clientX - srcRect.left) * width/srcRect.width; coordinates[ nbClicks * 2 + 1 ] = (event.clientY - srcRect.top) * height/srcRect.height; srcC.strokeRect(coordinates[ nbClicks * 2 ] - 10, coordinates[ nbClicks * 2 + 1 ] - 10, 20, 20); } if (++nbClicks == 4) { dstC.beginPath(); dstC.moveTo(coordinates[ 0], coordinates[ 1 ]); for(i = 1; i < 4; i ++) { dstC.lineTo(coordinates[ i*2 ], coordinates[ i*2 + 1 ]); } dstC.closePath(); dstC.clip(); dstCvs.style.visibility = 'visible'; dstC.drawImage(srcImg, 0, 0, width, height); var left = 0, top = 0, w = width, h = width; srcC.strokeStyle = '#f00'; srcC.strokeRect(left - 10, top - 10, 20, 20); srcC.strokeRect(left + w - 10, top - 10, 20, 20); srcC.strokeRect(left + w - 10, top + h - 10, 20, 20); srcC.strokeRect(left - 10, top + h - 10, 20, 20); alert('Clipped image is now drawn, going to apply transform after this alert. On the left canvas, the positions of the mapped points are drawn in red.'); var t = getTransform(left, top, w, h); dstCvs.style.transform = t; } }; function adj(m) { // Compute the adjugate of m return [ m[4]*m[8]-m[5]*m[7], m[2]*m[7]-m[1]*m[8], m[1]*m[5]-m[2]*m[4], m[5]*m[6]-m[3]*m[8], m[0]*m[8]-m[2]*m[6], m[2]*m[3]-m[0]*m[5], m[3]*m[7]-m[4]*m[6], m[1]*m[6]-m[0]*m[7], m[0]*m[4]-m[1]*m[3] ]; } function multmm(a, b) { // multiply two matrices var c = Array(9); for (var i = 0; i != 3; ++i) { for (var j = 0; j != 3; ++j) { var cij = 0; for (var k = 0; k != 3; ++k) { cij += a[3*i + k]*b[3*k + j]; } c[3*i + j] = cij; } } return c; } function multmv(m, v) { // multiply matrix and vector return [ m[0]*v[0] + m[1]*v[1] + m[2]*v[2], m[3]*v[0] + m[4]*v[1] + m[5]*v[2], m[6]*v[0] + m[7]*v[1] + m[8]*v[2] ]; } function pdbg(m, v) { var r = multmv(m, v); return r + " (" + r[0]/r[2] + ", " + r[1]/r[2] + ")"; } function basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) { var m = [ x1, x2, x3, y1, y2, y3, 1, 1, 1 ]; var v = multmv(adj(m), [x4, y4, 1]); return multmm(m, [ v[0], 0, 0, 0, v[1], 0, 0, 0, v[2] ]); } function general2DProjection( x1s, y1s, x1d, y1d, x2s, y2s, x2d, y2d, x3s, y3s, x3d, y3d, x4s, y4s, x4d, y4d ) { var s = basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s); var d = basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d); return multmm(d, adj(s)); } function project(m, x, y) { var v = multmv(m, [x, y, 1]); return [v[0]/v[2], v[1]/v[2]]; } function getTransform(left, top, w, h) { var x1 = coordinates[ 0 ], y1 = coordinates[ 1 ]; var x2 = coordinates[ 2 ], y2 = coordinates[ 3 ]; var x3 = coordinates[ 4 ], y3 = coordinates[ 5 ]; var x4 = coordinates[ 6 ], y4 = coordinates[ 7 ]; var t = general2DProjection (left, top, x1, y1, w, top, x2, y2, w, h, x3, y3, left, h, x4, y4); for(i = 0; i != 9; ++i) t[i] = t[i]/t[8]; t = [t[0], t[3], 0, t[6], t[1], t[4], 0, t[7], 0 , 0 , 1, 0 , t[2], t[5], 0, t[8]]; t = "matrix3d(" + t.join(", ") + ")"; return t; }
：ここで再び、あなたは時計回りチェス盤の左上隅から始まる4頭の隅にクリックする必要があります私の適応の両方で、私は上をクリック4番目のクリックはその四辺形へのクリッピングをトリガし、その歪んだ四辺形を2dの正方形に戻すことを目標とする変換を計算して適用します。
ありがとう、Tepp。
PS：私はあまり経験がありませんが、著者に「ping」できると思います例2の例では、これは悪いエチケットではないと思います：@MvG – teppyogi