Rotar polígonos en HTML5

Durante los últimos días hemos visto una serie de artículos que nos van a ayudar para poder rotar polígonos en HTML5 y explicar paso a paso cómo se hace además de representarlo visualmente en un canvas para poder ver cómo se produce esta rotación.

Lo que queremos hacer es que dado un polígono en base a sus ejes podamos rotarlo 90º, 180º o 270º. Para poder realizar rotaciones lo que vamos a utilizar es la multiplicación de matrices. Es por ello que lo primero que haremos será crear una matriz con las coordinadas de los vértices del polígono.

var poligono = [[3,3,9],[3,9,3]];

En este caso utilizamos el primer elemento de la matriz serán los valores del eje de las X y la segunda posición serán los valores del eje de las Y.

Lo que haremos será añadir el polígono al canvas mediante su contexto. Los polígonos, tal y como vimos en el artículo de dibujar polígonos en HTML5, se construyen mediante un path y trazando líneas con .lineTo(). Es importante que para que las líneas se pinten deberemos de invocar al método .stroke() y que para que se rellene el polígono deberemos de utilizar el método .fill().

ctx.beginPath();
ctx.moveTo(coords[0][0], coords[1][0]);

for (x=1;x<coords[0].length;x++)
    ctx.lineTo(coords[0][x], coords[1][x]);                

ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#FFCC00";  
ctx.stroke();            
ctx.fillStyle = "#FFCC00";        
ctx.fill();

El contexto del elemento canvas lo habremos conseguido del canvas mediante el método .getContext()

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Ahora ya tenemos el polígono dibujado en el canvas. Así que lo siguiente que haremos será añadir unos botones que nos permitan rotar el polígono.

<button id="r90">Rotar 90</button>
<button id="r180">Rotar 180</button>
<button id="r270">Rotar 270</button>

Sobre estos botones incluiremos unos escuchadores para gestionar el evento y poder rotar el polígono. Para ello utilizamos el método .addEventListener() sobre los botones.

var r90 = document.getElementById("r90");
r90.addEventListener("click",function(){
    rotar(m90);
},false);

var r180 = document.getElementById("r180");    
r180.addEventListener("click",function(){
    rotar(m180);
},false);

var r270 = document.getElementById("r270");
r270.addEventListener("click",function(){
    rotar(m2

Ahora pasamos a realizar la rotación del polígono, la cual hemos codificado dentro del método .rotar(). Lo que tenemos que saber es para rotar un polígono lo que debemos de hacer es multiplicarlo por otra matriz.

En el caso de que queramos rotarlo 90º deberemos de multiplicar el polígono por la matriz [[0,-1],[1,0]]. Si queremos rotar el polígono 180º deberemos de multiplicarlo por la matriz [[-1,0],[0,-1]] y si queremos rotar el polígono 270º deberemos de multiplicar la matriz por [[0,1],[-1,0]].

Así que el código Javascript de estas matrices lo definiremos de la siguiente forma:

var m90 = [[0,-1],[1,0]];
var m180 = [[-1,0],[0,-1]];
var m270 = [[0,1],[-1,0]];

Para ejecutar la rotación solo deberemos de multiplicar las matrices. Para ello tal y como hemos visto en el artículo multiplicar matrices en Javascript lo que hacemos es recorrer las matrices y ejecutar la multiplicación. El código será el siguiente:

function multiplicarMatriz(m1,m2) {

    fil_m1 = m1.length;
    col_m1 = m1[0].length;

    fil_m2 = m2.length;
    col_m2 = m2[0].length;

    if (col_m1 != fil_m2)
        throw "No se pueden multiplicar las matrices";
            
    let multiplicacion = new Array(fil_m1);
    for (x=0; x<multiplicacion.length;x++)
        multiplicacion[x] = new Array(col_m2).fill(0);

    for (x=0; x < multiplicacion.length; x++) {
        for (y=0; y < multiplicacion[x].length; y++) {            		            		
            for (z=0; z<col_m1; z++) {
                multiplicacion [x][y] = multiplicacion [x][y] + m1[x][z]*m2[z][y]; 
            }
        }
    }

    return multiplicacion;

}

Así que el método rotar nos quedará codificado de la siguiente forma:

function rotar(grados){             
    poligono = multiplicarMatriz(grados,poligono);
    dibujarPoligono(ctx,poligono);
}

Vemos que una vez rotado lo volvemos a pintar para ver el efecto.

De esta forma ya habremos conseguido rotar polígonos en HTML5 utilizando matrices para guardar las coordenadas de los vértices y multiplicaciones de matrices para ejecutar la rotación en sí.

Twittear

0 Compartir