>
Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

Canvas IX

Transformación

Concepto

En páginas anteriores hemos visto algunos métodos de transformación. tales como la traslación, la rotación y el escalado. Ahora vamos a ver un método que junta a los tres anteriores y además puede hacer otro tipo de transformación como es el sesgado.

El sesgado consiste en inclinar dos lados paralelos del canvas, por ejemplo, los verticales, dejando los horizontales en su sitio. Se consiigue así una especie de romboide. Podemos sesgar también los lados horizontales, consiguiendo asi una notable distorsión de la figura.

El método transform()

El método transform() puede realizar todo tipo de cambios en la forma del canvas, es decir traslación, rotación, escalado y sesgado. Para ello dispone de 6 parámetros:

cxt.transform(a,b,c,d,e,f)

matriz de transform

Los seis parámetros vienen determinados por una matriz de transformación, puedes ver su fórmula a la derecha.

Los siguientes valores son los que tendría por defecto el método, es decir al poner estos valores el canvas se queda igual que está:

cxt.transform(1,0,0,1,0,0)

Como ésto es bastante complicado, vamos a hacer un ejemplo en el que podremos cambiar el valor de los parámetros, y así vemos para qué sirve cada uno de ellos.

Ejemplo con el método transform()

Crearemos un banner parecido al que hicimos en la página anterior, de hecho las imágenes que vamos a utilizar las tienes en la página anterior. En el canvas la imagen de un coche, y debajo una serie de botones con los que podremos cambiar los parámetros del método transform: Este es el código HTML:

<div id="marco">
<canvas id="micanvas" width="400" height="300">
</canvas>
<table id="tabla1" >
  <tr>
    <td> a <img src="objetos/flechaArriba.gif" alt="subir1" onclick="subir(1)">
      <span class="contador" id="cont1"> 1.00</span>
      <img src="objetos/flechaAbajo.gif" alt="bajar1" onclick="bajar(1)">
    </td>
    <td> c <img src="objetos/flechaArriba.gif" alt="subir1" onclick="subir(3)">
      <span class="contador" id="cont3"> 0.00</span>
      <img src="objetos/flechaAbajo.gif" alt="bajar1" onclick="bajar(3)">
    </td>
    <td> e <img src="objetos/flechaArriba.gif" alt="subir1" onclick="subir(5)">
      <span class="contador" id="cont5"> 0.00</span>
      <img src="objetos/flechaAbajo.gif" alt="bajar1" onclick="bajar(5)">
    </td>
  </tr>
  <tr>
    <td> b <img src="objetos/flechaArriba.gif" alt="subir1" onclick="subir(2)">
      <span class="contador" id="cont2"> 0.00</span>
      <img src="objetos/flechaAbajo.gif" alt="bajar1" onclick="bajar(2)">
    </td>
    <td> d <img src="objetos/flechaArriba.gif" alt="subir1" onclick="subir(4)">
      <span class="contador" id="cont4"> 1.00</span>
      <img src="objetos/flechaAbajo.gif" alt="bajar1" onclick="bajar(4)">
    </td>
    <td> f <img src="objetos/flechaArriba.gif" alt="subir1" onclick="subir(6)">
      <span class="contador" id="cont6"> 0.00</span>
      <img src="objetos/flechaAbajo.gif" alt="bajar1" onclick="bajar(6)">
    </td>
  </tr>
</table>
<p id="restaurar"><input type="button" onclick="restaurar()" 
    value="Restaurar estado original" ></p>
</div>

Hemos puesto el canvas, y después una tabla en la que mostraremos las flechas o botones para controlar los parámetros de transform() .Para cada parámetro hemos puesto un contador que nos dice el valor que tiene en cada momento.

Para ver correctamente el banner necesitamos también el código CSS que coloca cada elemento en su sitio y le da el tamaño y estilo adecuado. Este es el código CSS:

canvas { background:#ffffcc  }
#marco { border: 1px solid black; width: 400px;  }
#tabla1 { border-collapse: collapse;  width: 400px;  }
#tabla1 td { border: 1px solid black; font: bold 20px arial; }
#tabla1 td img { width: 22px;}
#tabla1 .contador { background: navy ; color: yellow; 
      position: relative; top: -10px;
      padding: 2px 5px; font: bold 15px arial  }
#marco p{ text-align: center; margin: 5px; }

Ahora ponemos el código javascript en el cual inicia el canvas, y hace que al pulsar en los botones o flechas el valor del parámetro suba o baje. Las funciones subir() y bajar() van unidas a los eventos onclick que llevan las flechas. los parámetros que les pasamos a estas funciones indican el número de parámetro del método transform. Veamos el código javascript, el cual va comentado:

window.onload=function() {
//buscar en el DOM los contadores de los parámetros.
par1=document.getElementById("cont1"); 
par2=document.getElementById("cont2");
par3=document.getElementById("cont3");
par4=document.getElementById("cont4");
par5=document.getElementById("cont5");
par6=document.getElementById("cont6");
//iniciar canvas
cxt=iniciaCanvas("micanvas")
cxt.beginPath() //iniciar ruta
cxt.translate(200,150); //transladar origen al centro del canvas.
coche=new Image(); //imagen del coche en el canvas.
coche.src="objetos/coche.jpeg";
coche.onload=function() {
     cxt.drawImage(coche,-140,-90);
     }									
}
//valores iniciales de los parámetros de transform()
x1=1; x2=0; x3=0; x4=1; x5=0; x6=0;
function subir(p) { //aumentar valor del parámetro
    //Valores diferentes para los distintos parámetros;
    //para cada parámetro aumentamos su valor y lo guardamos.
    //el objeto DOM del contador lo guardamos en la variable part.
    switch(p) {
    case 1: 
    part=par1; x1+=0.1; xn=x1; break;
    case 2: 
    part=par2; x2+=0.1; xn=x2; break;
    case 3: 
    part=par3;x3+=0.1; xn=x3; break;
    case 4: 
    part=par4;x4+=0.1; xn=x4; break;
    case 5: 
    part=par5;x5+=5; xn=x5; break;
    case 6: 
    part=par6;x6+=5; xn=x6; break;
    }
    xn=xn.toFixed(2); //sólo dos decimales en el contador
    part.innerHTML=xn; //cambiar el contador
    transformar(); //ir a función que transforma y cambia la imagen.
			}
function bajar(p) { //disminuir el valor del parámetro:
    //seguimos los mismos pasos que en la función anterior
    switch(p) {
    case 1: 
    part=par1; x1-=0.1; xn=x1; break;
    case 2: 
    part=par2; x2-=0.1; xn=x2; break;
    case 3: 
    part=par3;x3-=0.1; xn=x3; break;
    case 4: 
    part=par4;x4-=0.1; xn=x4; break;
    case 5: 
    part=par5;x5-=5; xn=x5; break;
    case 6: 
    part=par6;x6-=5; xn=x6; break;
    }
    xn=xn.toFixed(2);
    part.innerHTML=xn;
    transformar(); 
    }
//botón restaurar: vuelve el canvas a su estado original		
function restaurar() { 
    //Valores iniciales de parámetros de transform()
    x1=1; x2=0; x3=0; x4=1; x5=0; x6=0;
    //Poner contadores con los valores iniciales:
    par1.innerHTML=x1;
    par2.innerHTML=x2;
    par3.innerHTML=x3;
    par4.innerHTML=x4;
    par5.innerHTML=x5;
    par6.innerHTML=x6;
    transformar(); //ir a función que transforma y cambia la imagen.
    }
//transformación de la imagen según los parámetros cambiados.
function transformar() {
    cxt.beginPath(); //iniciar ruta
    cxt.clearRect(-200,-150,400,300); //borrar contenido anterior
    cxt.save(); //salvar estado del canvas.
    coche1=new Image; //la imagen se inserta como un nuevo objeto
    coche1.src="objetos/coche.jpeg";
    coche1.onload=function() { //tras cargarse la imagen: 
       cxt.transform(x1,x2,x3,x4,x5,x6); //realizamos la transformación 
       cxt.drawImage(coche1,-140,-90); //insertamos la imagen
       cxt.restore(); //restauramos estado del canvas
       }	
    }

a subir1 1.00 bajar1 c subir1 0.00 bajar1 e subir1 0.00 bajar1
b subir1 0.00 bajar1 d subir1 1.00 bajar1 f subir1 0.00 bajar1

El resultado puede verse en el banner que tenemos a la derecha.

Al tener cada valor en una celda distinta podemos comprobar cómo se comporta cada uno de ellos.

Valores de transform()

Podemos agrupar los valores de transform() en tres pares. El primero son los dos últimos parámetros (valores e,f) que actúan igual que el método translate, ya que cambian el origen del canvas en el número de pixeles indicado en ellos.

El primer valor y el cuarto, (parámetros "a" y "d") actuan igual que el método scale(), es decir aumentan o disminuyen el tamaño del canvas, siendo el primer parámetro el escalado horizontal, y el cuarto el escalado vertical. Es por eso que sus valores iniciales son 1.

Los parámetros segundo y tercero hacen un sesgado de la imagen, tal como lo hace el metodo skew() de la propiedad transform de CSS3 (ver manual "Animación en CSS3 la propiedad transform Con la única diferencia que en CSS3 el sesgado se mide en grados, y aquí se mide de la misma forma que el escalado. El segundo parámetro (b) inclina los lados horizontales, mientras que el tercer parámetro (c) inclina los lados verticales.

Puedes comprobar todo esto en el canvas anterior, cambiando los valores de los parámetros.

Realizar una rotación con transform es algo más complicado ya que los parámetros b y c deben tener valores opuestos y además debemos cambiar los valores de a y d debemos cambiarlos pero deben ser siempre iguales. por ejemplo, con los valores transform(0.8,0.5,-0.5,0.8,0,0) conseguiremos girar el canvas 45º con un tamaño similar al que tenía.






Aquí acaba este manual de Canvas. Hemos querido indicar sobre todo los métodos y las propiedades que se pueden aplicar al canvas. Sin embargo sus posibilidades van más alla, ya que podemos aprovechar todo el potencial del lenguaje javascript.



Manual Canvas avanzado

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo