イメージの変更パースペクティブに使用されるアルゴリズムは何ですか？

Question

私は既知の4つの座標を持つ画像を持っていて、また、アングル値を持っています。どのように角度値に基づいて画像のパースペクティブを変更できますか？私はこれをjavascriptで完成させます。手伝ってくれませんか？あなたがアルゴリズムを指定することができれば私はします。

ありがとうございます。上記のコードの使用

 var c= document.getElementById('canvas'); 
     var ctx=c.getContext("2d"); 
     var base=document.getElementById('base'); 
     var layer0=document.getElementById('layer0');; 
     var layer1=document.getElementById("layer1"); 

    var wall1=document.getElementById("wall1"); 
    var wall2=document.getElementById("wall2"); 

    // ctx.drawImage(layer0,50,50); 
    //ctx.drawImage(layer1,50,50); 

      var canvas2 = document.createElement("canvas"); 
      var context2 = canvas2.getContext("2d"); 
      canvas2.width=layer1.width; 
      canvas2.height=layer1.height; 
     context2.drawImage(layer1,0,0); 

     var canvas4= document.createElement("canvas"); 
     var context4 = canvas4.getContext("2d"); 
     // canvas2.width=layer0.width; 
     //canvas2.height=layer0.height; 
     context4.drawImage(wall1,0,0); 
     // context2.globalCompositeOperation="source-atop"; 
     //context2.drawImage(wall1,0,0); 
     ctx.drawImage(base,50,50,1200,700); 

     var img=new Image(); 
     img.width=layer0.width; 
     img.height=layer0.height; 
     img.src=canvas2.toDataURL(); 


     var canvas3 = document.createElement("canvas"); 
     var context3 = canvas3.getContext("2d"); 
     canvas3.width=layer0.width; 
     canvas3.height=layer0.height; 
     context3.drawImage(layer0,0,0); 

     var canvas5= document.createElement("canvas"); 
     var context5 = canvas5.getContext("2d"); 

     context5.drawImage(wall2,0,0); 

    var img1=new Image(); 
    img1.width=layer1.width; 
    img1.height=layer1.height; 
    img1.src=canvas3.toDataURL(); 
    // ctx.drawImage(img1,50,50,1200,800); 
    imgperspective(canvas2,canvas4.toDataURL(),120) 
    //imgperspective(canvas3,canvas5.toDataURL(),30) 
    function imgperspective(wallImage,effectImg,aangle) 
    { 
    var canvas1 = document.createElement('canvas'); 
    var ctx1 = canvas1.getContext('2d'); 

    var imgObj = new Image(); 
    imgObj.src = wallImage.toDataURL(); 
    var wallHeight, wallWidth , wallName , noPixelsPerFeet,  angle 
    =aangle, 

    scale; 

    scale =angle/180.0; 
    console.log("scale = "+scale); 
    imgObj.onload = function() { 
    var imgW = imgObj.width; 
    var imgH = imgObj.height; 
    canvas1.width = imgW; 
    canvas1.height = imgH; 
    ctx1.drawImage(this, 0, 0, imgW, imgH); 
    var h = imgH; 
    var w = imgW; 
    var idata = ctx1.getImageData(0, 0, imgW, imgH), 
     buffer = idata.data, 
     buffer32 = new Uint32Array(buffer.buffer), 
     x, y, 
     x1 = w, 
     y1 = h, 
     x2 = 0, 
     y2 = 0; 
    //make first column transparent 
    for (i = 0; i < h; i++) { 
     buffer32[0 + (i*w)] = 0; 
    } 
    // get left edge 
    for (y = 0; y < h; y++) { 
     for (x = 0; x < w; x++) { 
      if (buffer32[(x+(y*w))] > 0) { 
       if (x < x1) x1 = x; 
      } 
     } 
    } 

    // get right edge 
    for (y = 0; y < h; y++) { 
     for (x = w; x >= 0; x--) { 
      if (buffer32[(x+(y*w))] > 0) { 
       if (x > x2) x2 = x; 
      } 
     } 
    } 

    // get top edge 
    for (x = 0; x < w; x++) { 
     for (y = 0; y < h; y++) { 
      if (buffer32[(x+(y*w))] > 0) { 
       if (y < y1) y1 = y; 
      } 
     } 
    } 

    // get bottom edge 
    for (x = 0; x < w; x++) { 
     for (y = h; y >= 0; y--) { 
      if (buffer32[(x+(y*w))] > 0) { 
       if (y > y2) y2 = y; 
      } 
     } 
    } 
     var dimensions = [(x1+0.5),(y1+0.5),(x2-x1),(y2-y1)]; 
     console.log(dimensions); 
     var imgObj1 = new Image(); 
     imgObj1.src = effectImg; 
     imgObj1.onload = function() { 
     ctx1.globalCompositeOperation = "source-atop"; 
     var temp = perspectiveA(imgObj1, dimensions); 
     var newImg = new Image(); 
     newImg.src = temp; 


       var temp = perspectiveA(imgObj1, scale); 
       var newImg = new Image(); 
       newImg.src = temp; 
       newImg.onload = function() { 

       ctx1.drawImage(newImg, (x1+0.5), (y1+0.5), (x2-x1),(y2- y1)); 
        var image =new Image(); 
        image.src= canvas1.toDataURL(); 

        ctx.drawImage(image,50,50,1200,700); 

     } 
     }}} 
    function perspectiveA(selectedRaster, scale) { 
    pixelWidth = 1; 
    var canvas2 = document.createElement("canvas"); 
    var context2 = canvas2.getContext('2d'); 
    canvas2.width = selectedRaster.width; 
    canvas2.height = selectedRaster.height; 
    var widthSlices = (selectedRaster.width*0.5), 
    heightSlices = (selectedRaster.height*0.5), 
    sliceWidth = (selectedRaster.width/ widthSlices), 
    sliceHeight =(selectedRaster.height/ 2), 
    heightScale = ((scale)/widthSlices), 
    widthScale = (pixelWidth/selectedRaster.width); 

    for (var i = 0; i < widthSlices; i++) { 
    var sx = (sliceWidth*i), 
     sy = 0; 

    var dx = (sliceWidth*i), 
     dHeight = (sliceHeight*(1 + (heightScale* ((widthSlices-1)- i)))), 
     dy = 0, 
     dWidth = (sliceWidth * 1 + (widthScale*((widthSlices-1)-i))); 
     var moveY = (dHeight-sliceHeight); 

    context2.drawImage(selectedRaster, sx, sy, sliceWidth, sliceHeight, dx, 
    (dy-moveY), dWidth, dHeight); 
    sy = sliceHeight; 
    dy = sliceHeight; 
    dHeight = (sliceHeight*(1 + (heightScale*((widthSlices-1),- i)))); 
    moveY = (dHeight- sliceHeight); 
    context2.drawImage(selectedRaster, sx, sy, sliceWidth, sliceHeight, dx, 
     dy, dWidth, dHeight); 
     } 
     return canvas2.toDataURL(); 
      } 

Answer 1

float[] src = {0, 0, w, 0, 0, h, w, h}; 
    float[] dst = {startWidth, startHeight, endWidth, startHeight,startWidth, endHeight, endWidth, endHeight}; 
    Bitmap transformed = cornerPin(wall, src, dst); 
     public static Bitmap cornerPin(Bitmap b, float[] srcPoints, float[] dstPoints) { 
    int w = b.getWidth(), h = b.getHeight(); 
    Bitmap result = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); 
    Paint p = new Paint(Paint.ANTI_ALIAS_FLAG); 
    Canvas c = new Canvas(result); 
    Matrix m = new Matrix(); 
    m.setPolyToPoly(srcPoints, 0, dstPoints, 0, 4); 
    c.drawBitmap(b, m, p); 
    return result; 
} 

我々はまだ漠然としたビットマップイメージ