Foros del Web » Programando para Internet » Javascript »

Deformar imagen con javascript

Estas en el tema de Deformar imagen con javascript en el foro de Javascript en Foros del Web. Hola amigos. Quisiera saber si se puede, con javascript, deformar los nodos de una imagen, como la siguiente:...
  #1 (permalink)  
Antiguo 26/04/2011, 12:00
 
Fecha de Ingreso: marzo-2011
Mensajes: 4
Antigüedad: 13 años
Puntos: 0
Deformar imagen con javascript

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

  #2 (permalink)  
Antiguo 26/04/2011, 23:02
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: Deformar imagen con javascript

Se puede hacer con el elemento canvas, aunque no es tan sencillo:
http://acko.net/blog/projective-texturing-with-canvas
  #3 (permalink)  
Antiguo 27/04/2011, 06:03
 
Fecha de Ingreso: marzo-2011
Mensajes: 4
Antigüedad: 13 años
Puntos: 0
Respuesta: Deformar imagen con javascript

Muchisimas gracias.

Ahora... a investigar sobre canvas se ha dicho!
  #4 (permalink)  
Antiguo 24/08/2011, 15:40
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: Deformar imagen con javascript

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(ctxtexturepts) {
    
/*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 = [[012], [230]];
    for (var 
t=0t<2t++) {
        var 
pp tris[t];
        var 
x0 pts[pp[0]].xx1 pts[pp[1]].xx2 pts[pp[2]].x;
        var 
y0 pts[pp[0]].yy1 pts[pp[1]].yy2 pts[pp[2]].y;
        var 
u0 pts[pp[0]].uu1 pts[pp[1]].uu2 pts[pp[2]].u;
        var 
v0 pts[pp[0]].vv1 pts[pp[1]].vv2 pts[pp[2]].v;
        
ctx.save(); ctx.beginPath(); ctx.moveTo(x0y0); ctx.lineTo(x1y1);
        
ctx.lineTo(x2y2); 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/deltadelta_d/delta,
                      
delta_b/deltadelta_e/delta,
                      
delta_c/deltadelta_f/delta);
        
ctx.drawImage(texture00);
        
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(ctxtexturepts);
    }
}
</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

Etiquetas: canvas, deformar, mapping, texturas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:06.