Introducción a Kinetic JS para manejar el Canvas de HTML5

Este último tiempo estuve dedicado al desarrollo de video juegos sobre HTML5. Esta nueva tecnología incluye un elemento llamado Canvas sobre el cual se puede disponer para realizar dibujos, insertar imágenes y texto, o manipular píxel por píxel. Es decir, lo más cercano a un lienzo de artista sobre el cual crear.

Sin embargo, yo ya había trabajado sobre un elemento parecido, cuando en la universidad tuve que desarrollar un graficador de funciones en Java. Esta plataforma de desarrollo incluye una clase que si mal no recuerdo se llama también Canvas.

Sobre el Canvas de HTML5 se puede hacer de todo, pero claro, el pincel para dibujar sobre él es nada más y nada menos que el lenguaje Javascript al que muchos le tienen pánico. En mi opinión, hay características propias que limitan demasiado y molestan a la hora de programar. Pero todas esas limitaciones se salvan aprendiendo algún framework como MooTools o JQuery.

Los nuevos elementos y características de HTML5 como el Canvas introducen una serie de métodos nuevos que dan la posibilidad de hacer más cosas. Es como si el universo se ampliara de golpe. Intentar controlar el Canvas utilizando su API es totalmente posible, aunque puede resultar un poco molesto para proyectos medianos o grandes.

En estos casos, se hace imprescindible contar con una capa de abstracción para que maneje todo lo referido a la salida por pantalla en el Canvas. Equivale a una parte (o su totalidad, según el proyecto) a la vista de un patrón de diseño MVC.

Kinetic Javascript Library es una librería que funciona de forma maravillosa para estos casos. Cualquiera que esté pensando en desarrollar aplicaciones sobre el Canvas de HTML5, no puede dejar de probarla.

A continuación voy a hacer una introducción a la librería.

Kinetic JS Library

La pueden descargar de su web oficial. Al igual que otros frameworks de Javascript, encontrarán el código fuente y su versión comprimida, ideal para entornos de producción.

Es recomendable seguir el siguiente ejemplo utilizando Mozilla FirefoxKinetic JS funciona también con Google Chrome, pero puede tener algún inconveniente para cargar imágenes. En otro artículo explicaré como salvar ese problema.

Van a ver que utilizo MooTools como habitualmente lo hago en mis proyectos. Aquí, puntualmente, sólo servirá para empezar a ejecutar el código una vez que el DOM esté cargado.

Kinetic JS es una librería de objetos que se pueden crear y dibujar sobre el Canvas. Círculos, rectángulos, polígonos e imágenes forman parte de ella. Pero hay algunos elementos que sirven para darle un orden y facilitar la inserción. El primer elemento que voy a explicarles se llama Stage y lo pueden traducir como escenario. Es el que se asocia directamente con el Canvas. Luego, aparecen los objetos Layer que son capas que se insertan en el Stage y que a su vez contienen los elementos gráficos que enumeré al principio.

Resumiendo, el Stage se asocia al Canvas y contiene los Layers. Los Layers contienen los círculos, rectángulos, polígonos e imágenes.

Vamos a empezar a ver el HTML base de este ejemplo.

Trabajaremos sobre este código. Asegúrense de que se carguen correctamente los scripts. Como ven, se define un div y se lo identifica con un nombre de id. ¿Dónde está el canvas? Lo crea Kinetic JS y lo inserta solo en el div. Un buen consejo es ponerle vía CSS un borde al canvas para poder visualizarlo.

Añadiremos un script en el mismo archivo para empezar a probar la librería. Voy a ir poniendo porciones incompletas de código. No lo copien directamente de aquí porque no les va a funcionar. Al final del artículo está el enlace al ejemplo completo.

La primera línea corresponde a la asignación de una función anónima al completarse el evento de carga del árbol DOM. En otras palabras, luego de la primera línea, todos los elementos de la página estarán disponibles para poder utilizarse y es a partir de ahí cuando podremos empezar a programar.

Creamos un elemento Kinetic.Stage. Dentro de los paréntesis se pueden pasar entre llaves las propiedades. Algunas son obligatorias, otras opcionales. container necesita el id del div donde se insertará el canvas. width y height son las dimensiones que tendrá en ancho y alto.

En las siguientes dos líneas crearemos dos elementos Kinetic.Layer a los que más adelante les agregaremos objetos y que finalmente insertaremos en el escenario. En principal pondremos objetos que estarán en primer plano y en fondo, una imagen a modo de fondo de pantalla del canvas.

Crear un círculo

Avancemos con el código. Vamos a crear un círculo.

El objeto se llama Kinetic.Circle. Entre llaves le podemos pasar muchos parámetros para configurarlo. x es la coordenada horizontal sobre la que se ubicará; y es la coordenada vertical. Recuerden que las verticales se incrementan hacia abajo. radius es el radio del círculo. fill es el color de relleno. stroke, el color del borde. strokeWidth,el grosor del borde. Hay aún más parámetros para hacer el círculo personalizable. Los pueden consultar en el tutorial oficial de Kinetic JS: Circle.

Luego, se inserta la variable que referencia al objeto Circle en el Layer principal que habíamos creado antes.

Crear un rectángulo

Ahora crearemos un rectángulo

Es parecido al anterior. El objeto se llama Kinetic.Rect. Le personalicé los mismos parámetros que al círculo, pero si se fijan, agregué uno que es draggable y lo puse en true. Eso sirve para poder arrastrar y soltar el elemento. Lo podrán ver en el ejemplo terminado. Finalmente, se agrega a la capa principal, al igual que el círculo. La página de parámetros del rectángulo la pueden encontrar aquí: Rect.

Creación de texto

Puede resultar muy útil la inserción de texto. Este no será como el de los elementos de HTML, sino que estará metido en el canvas. Veamos como hacerlo.

Primero se define una variable string común y corriente de Javascript. Luego, se crea un elemento Kinetic.Text. Otra vez, entre llaves se pueden poner los parámetros de configuración. text es el texto que se quiere poner. fontSize es el tamaño de la letra. fontFamily es el tipo de letra. textFill es el color de la letra. x e y son para posicionarlo dentro del canvas. La lista de parámetros la pueden ver aquí: Text.

Al igual que los otros elementos, este texto también lo agregamos a la capa principal.

Creación de una imagen

Ahora, veremos como insertar una imagen. Para este caso, opté por insertar una que cubra todo el canvas, a modo de fondo, pero tienen que entender que pueden darle los parámetros que necesiten y hacerla más pequeña si así lo desean.

Primero creamos un elemento imagen de HTML y le definimos el atributo src que es la ruta donde se encuentra la imagen. Luego, creamos un elemento Kinetic.Image. El parámetro image debe tener la imagen creada. x e y posicionan la imagen en el canvas. width y height establecen las dimensiones en ancho y alto.

La imagen se pondrá de fondo así que se inserta en la otra capa llamada fondo.

Visualización de los elementos

Hasta aquí todo es abstracto. Vamos a materializar los elementos.

Le agregamos a escenario que es un elmento Kinetic.Stage las dos capas fondo y principal que son elementos Kinetic.Layer. Es importante marcar el orden, la que se agrega última queda delante. De todas formas, es posible cambiar el orden de las capas en cualquier momento del programa.

Finalmente, con el método draw del Stage, se dibujan las capas, que a su vez contienen los elementos que creamos.

El resultado es el siguiente. Ejemplo introducción a Kinetic JS

El código fuente por completo lo pueden ver aquí: Código fuente Introducción a Kinetic JS

Y tengo mucho más para contar sobre Kinetic JS, pero será en otro artículo porque este ya se hizo demasiado largo. ¡Hasta la próxima!

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

4 thoughts on “Introducción a Kinetic JS para manejar el Canvas de HTML5

  1. Estuve probando kinect pero le encontre creo que una falencia. Es la de no podes dibujar en tiempo real sobre el. Es decir por ejemplo si quiero hacer una pizarra interactiva como lo haria tan simple con canvas con kinect no se puede hacer. O sera que yo no encontre la forma?

  2. Estas últimas semanas estuve probando bastante esta librería. El problema que marcás no lo noté, pero porque no intenté hacer algo como eso. Lo más parecido que hice fue un cursor personalizado que lamentablemente no funciona porque solamente se puede aplicar el evento ‘mousemove’ cuando el cursor está sobre algún elemento cargado en un layer.

    Voy a ver si profundizo un poco en el tema que decís en algún artículo próximo.
    Gracias por tu comentario

  3. hola una pregunta, tu manejas lo que son figuras basicas que están establecidas de manera estaticas, no se si de casualidad sepas lo que es crear un lienzo con kineticjs en donde hagas tus propios dibujos como rayas y asi?? de una manera mas dinamica

  4. Adrián

    Hace rato que no trabajo con Kinetic JS. La idea de esta librería siempre fue evitar tener que dibujar todo por cuenta propia. Si te interesa crear tus propios dibujos para después volcarlos al lienzo, deberías investigar la API vinculada al Canvas de HTML5. Y también el formato SVG.

    ¡Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*