1. KineticJS: canvas++

Primera entrada de una serie dedicada a KineticJS, una librería de Eric Drowell que permite trabajar con canvas orientado a objetos.

gvozdariki kinesik

archivado en: JavaScript / 31 marzo, 2013 / taller: ,

Canvas es una maravilla que permite hacer cosas muy chulas con JavaScript. Sin embargo, tiene un problema de momento y es que aún no han terminado de implementar un sistema cómodo para manejar las figuras una vez dibujadas, ya sea mediante la asignación de ids, hit areas, capas o cualquier otra vaina similar. Esto obliga, al menos por lo que tengo entendido, a ir redibujando el lienzo cuando es interactivo, como sucede en los juegos, lo cual termina siendo un incordio que obliga a desarrollar códigos complejos para cualquier nimiedad.

Como me sugirieron Jorge y Borja, una solución es recurrir a librerías que permitan trabajar con canvas orientado a objetos, así que me puse a investigar un poco sobre el tema. Después de ver un par de ellas, me decanté por una desarrollada por Eric Drowell, que es sencillamente perfecta. Se llama KineticJS y es a canvas lo que jQuery a JavaScript.

Permite trabajar con canvas orientado a objetos, tiene varias capas, diferencia entre eventos de ratón y pantallas táctiles, las animaciones se preparan con mucha facilidad, permite arrastrar, escalar, rotar y transformar los objetos una vez creados mediante hit areas,  seleccionarlos por id, por name, prevención de eventos... y un largo etcétera. En fin, una verdadera maravilla, así que voy a dedicarle un par de entradas pues vale la pena conocerla a fondo.

Nodos, layers y stages

A la que se conozca un poco cómo funcionan los programas de diseño gráfico resultará fácil cómo funciona la estructura de Kinetik: un objeto canvas incluye un stage (capa), que tiene uno o más layers (canales) y, a su vez, en cada canal puede haber una o más shapes (figuras), que pueden estar o no agrupadas. Vamos, la estructura por capas del Photoshop o el Ilustrator para aclararnos.

kinetik_nodos

Por analogía con los documentos XML y la estructura DOM, Cada uno de estos «receptáculos» se denominan nodos: el nodo principal es el canvas y luego se va recorriendo toda la estructura. Esto queda claro si lo pensamos como si fuera un esquema:

1. Stage

1.1. Layer 1

1.1.1. Figura 1

1.1.2. Grupo 1

1.1.2.1. Figura 2

1.2.2.2. Figura 3

1.2. Layer 2

1.2.1. Figura 4

... etcétera.

Proceso básico

Lo primero, claro está, es bajarse la librería, que se debe cargar en el documento HTML como cualquier otro script enlazado y a continuación el archivo donde vamos a preparar nuestro código:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Kinetic JS</title>

<script type="text/javascript" src="js/kinetic-v4.4.0.min.js"></script>

<script type="text/javascript" src="js/nuestro-archivo.js"></script>

</head>

<body>

</body>

</html>

Ya en el archivo en el que vamos a incluir nuestros scripts, conviene enmarcarlos en una sentencia domReady para que se ejecuten una vez que se ha terminado de cargar el DOM (equivale al $(document).ready() de  jQuery, que podríamos usar en su lugar si estamos trabajando también con esta librería).

Es decir, o esto...

$(document).ready(function() {

// el código aquí...

});

...o esto otro:

window.onload = function() {

// el código aquí...

}

En Kinetik, el canvas no se declara en el documento HTML, sino en el código JavaScript. En su lugar, se pone un div que servirá de contenedor.

<body>

<div id="lienzo"></div>

</body>

El id de ese div contenedor es que se recoge, ya sí en nuestro archivo js, para declarar el stage, que como todo en esta librería es un objeto.

var miStage = new Kinetic.Stage({

container: 'lienzo',

width: 800,

height: 600

});

Luego podemos declarar nuestro primer objeto layer mediante el método Layer() del objeto Kinetic:

var miLayer = new Kinetic.Layer();

Lo incorporamos al stage que hemos creado mediante el método add():

miStage.add(miLayer);

Y ya sobre ese layer podemos ir añadiendo todos los objetos que queramos, como un estupendo rectángulo colorao. Primero lo creamos:

var miObjeto = new Kinetic.Rect({

x: 50,

y: 55,

width: 200,

height: 150,

fill: '#900',

stroke: '000',

strokeWidth: 2

});

Lo añadimos al layer que queramos.

miLayer.add(miObjeto);

Y, por último, le indicamos que se redibuje mediante el método draw() para que muestre la figura que acabamos de incorporar:

miLayer.draw();

Sencillo, no?

Bueno, de momento vamos a dejarlo aquí.

|| Tags: , ,

valoración de los lectores sobre 1. KineticJS: canvas++

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (13 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.