Dibujando con Graphics
08/03/2016
Introducción
En esta entrada vamos a profundizar en una de las claseses más básicas y útiles de EaselJS. Esta clase nos permitirá crear figuras simples que podremos añadir al Display List de nuestro Stage para luego renderizarlas dibujándolas en el canvas de HTML5.
Para empezar, organizaremos nuestros archivos de la siguiente manera:
- Un index.html con el html de nuestro ejemplo. Éste tendrá referencias a las librerías de JQuery y CreateJS y a nuestros scripts propios.
- Un script.js con nuestros scripts donde escribiremos el código usando las librerías importadas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dibujando figuras con Graphics</title>
</head>
<body>
<canvas id="canvas" width="500" height="200" style="background-color: black"></canvas>
<!--LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Usaremos JQuery únicamente para ejecutar nuestros scripts por primera vez, cuando el Documento esté preparado. En el fichero script.js escribiremos el código:
$(document).ready(function(){
});
De este modo nuestros scripts se ejecutarán inmediatamente después de que el documento esté cargado y listo.
La clase Graphics
Con esta clase dispondremos de una serie de métodos que nos permitirán crear arte vectorial. Normalmente, ante la tarea de dibujar una imagen vectorial, deberemos elegir el Contorno, el Color del Contorno, la Forma y el Relleno de la Forma. Por ejemplo, si queremos dibujar un cuadrado con relleno verde y un contorno de 3 píxeles amarillo, podemos hacer lo siguiente:
$(document).ready(function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var g = new createjs.Graphics();
g.setStrokeStyle(3);
g.beginStroke("#ff0");
g.beginFill("green");
g.drawRect(canvas.width / 2, canvas.height / 2, 30, 30);
g.draw(ctx);
});
Almacenamos en variables nuestro canvas y su contexto. El contexto será necesario para poder renderizar un Graphics. Creamos un Graphics con:
var g = new createjs.Graphics();
Seguidamente usamos algunos de los distintos métodos para dibujar, en este caso: Indicamos un contorno con un grosor de 3 píxeles
g.setStrokeStyle(3);
Establecemos el color del contorno como verde con:
g.beginStroke("#ff0");
Indicamos que el relleno de la figura será de color verde:
g.beginFill("green");
Elegimos el método drawRect() para decir que será una forma rectangular. Este método recibe 4 parámetros drawRect(x, y, ancho, alto). Nótese que la esquina superior izquierda del rectángulo estará justo en el centro del canvas y tendrá un ancho y un alto de 30 píxeles, es decir, este rectángulo será un cuadrado ;)
g.drawRect(canvas.width / 2, canvas.height / 2, 30, 30);
Y finalmente ordenamos a Graphics que lo dibuje:
g.draw(ctx);
Esto generará una salida como esta:
Como siempre, consultad la documentación para experimentar con más métodos y formas. Graphics ofrece una API extensa para realizar todo tipo de dibujos. Es interesante saber que todos los métodos de esta API devuelven la propia instancia de Graphics, esto en JavaScript permite encadenar todos los métodos en una sola línea:
g.setStrokeStyle(3).beginStroke("#ff0").beginFill("green").drawRect(canvas.width / 2, canvas.height / 2, 30, 30);
La API de Graphics
Podemos dibujar múltiples figuras geométricas usando el método adecuado. Por ejemplo, un círculo con drawCircle(x,y,radius) y usando beginBitmapFill(image, repetition, matrix) podremos rellenar la figura con una imagen propia. Nótese que los dos últimos parámetros son opcionales. Repetition puede tomar los valores 'no-repeat', 'repeat-x' y 'repeat-y'; por defecto 'repeat'.
var img = document.getElementById('fire_texture'); //La imagen debe ser un elemento img de nuestro html
g = new createjs.Graphics();
g.beginBitmapFill(img);
g.drawCircle(32, 32, 32);
g.draw(ctx);
También podemos dibujar un poliedro con drawPolyStar(x, y, radius, sides, angle) y cambiar el estilo del relleno con beginLinearGradientFill(colors, ratios, x0, y0, x1, y1) permitiéndonos hacer un degradado lineal
g = new createjs.Graphics();
g.beginLinearGradientFill(["#000","#FFF"], [0, 1], 32, 32, 64, 120);
g.drawPolyStar(96, 32, 30, 5, 0);
g.draw(ctx);
Con drawRoundRect(x, y, w, h, radius) podremos dibujar Rectángulos con esquinas redondeadas. Y con beginRadialGradientFill(colors, ratios, x0, y0, r0, x1, y1, r1) lo podremos rellenar con un gradiente radial.
g = new createjs.Graphics();
g.beginRadialGradientFill(["#F00","#00F"], [0, 1], 25, 25, 0, 25, 25, 32);
g.drawRoundRect(0, 0, 50, 50, 10);
g.draw(ctx);
Finalmente, también podemos dibujar línea a línea usando los métodos moveTo(x, y) y lineTo(x, y). Es imprescindible situar primero el cursor en el punto inicial de dibujado con moveTo(x, y), seguidamente haremos líneas sucesivas.
Usamos beginStroke(color) para visualizar las líneas. También podemos usar beginFill(color) para rellenar la figura de algún color en particular.
g = new createjs.Graphics();
g.beginStroke('yellow');
g.beginFill("black");
g.moveTo(32, 0);
g.lineTo(64, 48);
g.lineTo(0, 48);
g.lineTo(32, 0);
g.draw(ctx);