Deformar imagen con javascript

betances · #1 (**permalink**) 26/04/2011, 12:00

Hola amigos. Quisiera saber si se puede, con javascript, deformar los nodos de una imagen, como la siguiente:

Panino5001 · #2 (**permalink**) 26/04/2011, 23:02

Se puede hacer con el elemento canvas, aunque no es tan sencillo:
http://acko.net/blog/projective-texturing-with-canvas

betances · #3 (**permalink**) 27/04/2011, 06:03

Muchisimas gracias.

Ahora... a investigar sobre canvas se ha dicho!

Panino5001 · #4 (**permalink**) 24/08/2011, 15:40

Al final era bastante más sencillo que aquel ejemplo. Dejo un link funcional y el código utilizado:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Mapping</title> 

<script type="text/javascript"> 

function $(x){return document.getElementById(x);}

function textureMap(ctx, texture, pts) {

    /*Mapeo UV basado en Regla de Crámer para resolución de ecuaciones lineales y en 

    la obtención de determinantes por regla de Sarrus (Gracias a Andrea Griffini, AKA 6502 )*/

    var tris = [[0, 1, 2], [2, 3, 0]];

    for (var t=0; t<2; t++) {

        var pp = tris[t];

        var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;

        var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;

        var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;

        var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;

        ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);

        ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();

        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;

        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;

        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;

        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2

                      - v0*u1*x2 - u0*x1*v2;

        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;

        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;

        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2

                      - v0*u1*y2 - u0*y1*v2;

        ctx.transform(delta_a/delta, delta_d/delta,

                      delta_b/delta, delta_e/delta,

                      delta_c/delta, delta_f/delta);

        ctx.drawImage(texture, 0, 0);

        ctx.restore();

    }

}

function getInterPoints(ctx,x1,y1,x2,y2,from,to,step,nPoints,inv){

    var tx,ty;

    var x=x2-x1;

    var y=y2-y1;

    var dist=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));

    var angle=Math.atan(y/x);

    var seg=dist/nPoints;

    tx=x1;

    ty=y1;

    for(var i=from,j=to;i<(to+1);i+=(step),j-=step){

            tx+=seg*Math.cos(angle);

            ty+=seg*Math.sin(angle);

            if(!inv)

                ns.points[i]={x:tx,y:ty};

            else

                ns.points[j]={x:tx,y:ty};

    }

}

var ns={points:[]};

onload=function(){

    var nPoints=10;

    var ctx=$('c').getContext('2d');

    var tl={x:100,y:20};

    var tr={x:500,y:10};

    var bl={x:20,y:500};

    var br={x:700,y:590};

    ns.points[0]={x:tl.x,y:tl.y};

    ns.points[nPoints]={x:tr.x,y:tr.y};

    ns.points[((nPoints+1)*(nPoints+1))-(nPoints+1)]={x:bl.x,y:bl.y};

    ns.points[(nPoints+1)*(nPoints+1)-1]={x:br.x,y:br.y};

    getInterPoints(ctx,tl.x,tl.y,tr.x,tr.y,1,nPoints,1,nPoints,0);

    getInterPoints(ctx,bl.x,bl.y,br.x,br.y,((nPoints+1)*(nPoints+1))-(nPoints),(nPoints+1)*(nPoints+1)-1,1,nPoints,0);

    getInterPoints(ctx,bl.x,bl.y,tl.x,tl.y,nPoints+1,(nPoints*nPoints)-1,(nPoints+1),nPoints,1);

    getInterPoints(ctx,tr.x,tr.y,br.x,br.y,(nPoints*2)+1,((nPoints+1)*(nPoints+1))-(nPoints),(nPoints+1),nPoints,0);

    for(var i=nPoints+1;i<(nPoints+1)*nPoints;i+=nPoints+1){

        getInterPoints(ctx,ns.points[i].x,ns.points[i].y,ns.points[i+nPoints].x,ns.points[i+nPoints].y,i+1,i+nPoints-1,1,nPoints);

    }

    var texture=$('i'),

    ancho=texture.width/nPoints,

    alto=texture.height/nPoints;

    var faces=Math.pow(nPoints,2);

    var superior=0,supT=0,top=0;

    var inferior=nPoints+1,infT=nPoints+1;

    for(var z=1,g=0;z<faces+1;z++,g++){

        if(g>nPoints-1){

            g=0;

            top++;

            supT+=nPoints+1;

            infT+=nPoints+1;

            superior=supT;

            inferior=infT;

        }else if(g){

            superior+=1;

            inferior+=1;

        }

        var uv0=[((g+1)*ancho)-ancho,((top+1)*alto)];

        var uv1=[((g+1)*ancho)-ancho,((top+1)*alto)-alto];

        var uv2=[((g+1)*ancho),((top+1)*alto)-alto];

        var uv3=[((g+1)*ancho),((top+1)*alto)];

        var pts=[

                 {x:ns.points[inferior].x,y:ns.points[inferior].y,u:uv0[0],v:uv0[1]},

                 {x:ns.points[superior].x,y:ns.points[superior].y,u:uv1[0],v:uv1[1]},

                 {x:ns.points[superior+1].x,y:ns.points[superior+1].y,u:uv2[0],v:uv2[1]},

                 {x:ns.points[inferior+1].x,y:ns.points[inferior+1].y,u:uv3[0],v:uv3[1]}

                 ];

        textureMap(ctx, texture, pts);

    }

}

</script> 

 

</head> 

 

<body> 

<div id="log"></div> 

<canvas id="c" width="800" height="600"></canvas> 

<img id="i" src="http://www.noticiassin.com/wp-content/uploads/2011/08/La-Gioconda-o-Mona-Lisa.jpg" width="800" height="600" style="display:none" /> 

</body> 

</html>

No bien tenga un tiempo voy a intentar aplicarle Verlet para simular una tela