Al empezar no tenía ni idea de por donde "meterle mano" al asunto, así que empecé por leer sobre la sintaxis de JS. Encontré esta página W3Schools, en dicha página se explicaba todo muy detalladamente y con ejemplos que además puedes modificar tú mismo y ver que cambios produce. Me vino muy bien, pero solo para adquirir los conocimientos básicos sobre este lenguaje interpretado. A continuación empecé a buscar información sobre como manipular el canvas que ofrece la última versión del lenguaje básico de la web, HTML5 (en el enlace podéis encontrar algo de información interesante) y me encontré con una API bastante simple y reducida (aquí podéis encontrarla), así que seguí buscando un poco más por la web en busca de algun entorno de desarrollo gráfico que automatizase un poco más el desarrollo del código.
Finalmente encontré una librería JS bastante interesante. KineticJS se hace llamar y proporciona un manejo del canvas mucho más fluido, dinámico y comprensible a posibles futuros lectores del código. Esta librería es gratuita y se puede descargar desde la propia página principal. Actualmente su creador, Eric Rowell, sigue actualizando de manera regular la librería añadiendo nueva funcionalidad y eliminando los bugs reportados.
Voy a dar una pequeña pincelada sobre esta librería que la verdad a mi me ha venido genial, por si a otras personas en el futuro les pudiese venir bien la información. En la página hay varios tutoriales donde se explica bastante bien las funcionalidades básicas de la librería.
Para comenzar a usarla debemos descargarnosla para añadirla como source en nuestro fichero .html o podríamos usar la URL. Yo recomiendo descargarla. Una vez descargada debemos añadir a nuestro fichero html una etiqueta <div id="nuestroID"> y colocarlo donde queramos que aparezca el canvas. Cabe destacar que nuestroID es importante ya que posteriormente en el código JS necesitaremos dicho ID para añadir el canvas en su interior. Una vez hecho esto pasamos a lo que viene siendo la programación en JS.
Lo más interesante de KineticJS es la abstracción que proporciona de escenario, capas, grupos y formas/elementos. Esto es muy práctico ya que podemos distribuir funcionalidades y manejar las capas de formas diferente.
Para crear el canvas debemos hacer lo siguiente:
De esta forma tenemos declarado un nuevo escenario en el que podemos añadir capas, grupos y/o elementos. Como podemos observar la definición es bien sencilla. El primer parámetro es la cadena que representa el ID que tenía la etiqueta DIV mencionada anteriormente, ancho y alto... creo que no es necesario decir que son.
A continuación podríamos declarar una capa en la que introduciremos varios elementos. Para declarar una capa simplemente debemos hacer:
Cabe destacar que podemos pasarle como parámetro a esta función una configuración. Los elementos más destacables de la configuración serían si queremos o no mostrar la capa (visible: true, por ejemplo) o si queremos que la capa sea draggable (draggable: true). Para ver más sobre la configuración en la página web HTML5canvastutorials podemos encontrar información. La principal diferencia entre grupos y capas es que los primeros pueden contener grupos y formas (circulos, imagenes, etc) y las capas pueden contener grupos o cosas además de que cada capa está asociada a su propia etiqueta <canvas>. Yo, siguiendo los tutoriales que he encontrado en la página mencionada, he usado los grupos cuando quiero agrupar una serie de elementos con propiedades comunes (por ejemplo para poder hacer drag con muchos elementos de manera uniforme).
Por último podríamos declarar una forma/elemento. Estas formas pueden ser Circulos, Imagenes, Poligonos, Rectangulos, Poligonos regulares, Estrellas o Texto. Todos los elementos mencionados están documentados en la API oficial y además en la página se pueden encontrar tutoriales de uso además de los distintos elementos de la configuración. Vamos a suponer que queremos añadir un circulo. Simplemente deberíamos hacer lo siguiente:
Quizás al principio sea algo lioso, pero encuanto le dedicas un tiempo se convierte en algo muy intuitivo y muy muy sencillo de manejar. En el ejemplo podemos ver la facilidad con la que se gestionan los eventos sobre el circulo. Los eventos disponibles, tanto para PC de escritorio como para móvil, son los siguientes:
Escritorio: mouseover, mouseout, mousemove, mousedown, mouseup, click,dblclick, dragstart, and dragend
Móvil: touchstart, touchmove, touchend, dbltap, dragstart, dragmove, and dragend
Por último en el ejemplo vemos como se añaden los elementos a la capa y por último como se añade la capa al escenario.
Además podemos crear aplicaciones interactivas, haciendo uso de los métodos para eliminar, mostrar, dibujar y ocultar objetos.
Algo que me pareció curioso es que si le ponemos nombre a los elementos, este nombre debe ser único, ya que si no, al eliminar un elemento de una capa, cuando intentásemos eliminar el siguiente con el mismo nombre nos daría un error.
También me gustaría destacar que normalmente se suele comenzar a manipular la página con las sentencias JS cuando se ha cargado completamente, para ello simplemente debemos hacer lo siguiente:
Por el momento aquí dejo la pequeña introducción a esta gran librería, en caso de estimarlo oportuno, añadiré más entradas en el futuro. Un saludo y espero que os animéis a usar esta librería porque está genial.
var ancho = 1042;
var alto = 576;
var stage = new Kinetic.Stage("nuestroID", ancho, alto);
A continuación podríamos declarar una capa en la que introduciremos varios elementos. Para declarar una capa simplemente debemos hacer:
var layer = new Kinetic.Layer();
Cabe destacar que podemos pasarle como parámetro a esta función una configuración. Los elementos más destacables de la configuración serían si queremos o no mostrar la capa (visible: true, por ejemplo) o si queremos que la capa sea draggable (draggable: true). Para ver más sobre la configuración en la página web HTML5canvastutorials podemos encontrar información. La principal diferencia entre grupos y capas es que los primeros pueden contener grupos y formas (circulos, imagenes, etc) y las capas pueden contener grupos o cosas además de que cada capa está asociada a su propia etiqueta <canvas>. Yo, siguiendo los tutoriales que he encontrado en la página mencionada, he usado los grupos cuando quiero agrupar una serie de elementos con propiedades comunes (por ejemplo para poder hacer drag con muchos elementos de manera uniforme).
Por último podríamos declarar una forma/elemento. Estas formas pueden ser Circulos, Imagenes, Poligonos, Rectangulos, Poligonos regulares, Estrellas o Texto. Todos los elementos mencionados están documentados en la API oficial y además en la página se pueden encontrar tutoriales de uso además de los distintos elementos de la configuración. Vamos a suponer que queremos añadir un circulo. Simplemente deberíamos hacer lo siguiente:
var circulo = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 40,
fill: "#AABBCC"
stroke: "black",
strokewidth: 4
});
//Podriamos declarar eventos, tanto de escritorio como de movil asi:
circulo.on("mouseover touchstart", function(){
alert("Sorpresa!!");
});
//Anyadimos el circulo a la capa
layer.add(circulo);
//Anyadimo la capa al escenario
stage.add(layer);
Quizás al principio sea algo lioso, pero encuanto le dedicas un tiempo se convierte en algo muy intuitivo y muy muy sencillo de manejar. En el ejemplo podemos ver la facilidad con la que se gestionan los eventos sobre el circulo. Los eventos disponibles, tanto para PC de escritorio como para móvil, son los siguientes:
Escritorio: mouseover, mouseout, mousemove, mousedown, mouseup, click,dblclick, dragstart, and dragend
Móvil: touchstart, touchmove, touchend, dbltap, dragstart, dragmove, and dragend
Por último en el ejemplo vemos como se añaden los elementos a la capa y por último como se añade la capa al escenario.
Además podemos crear aplicaciones interactivas, haciendo uso de los métodos para eliminar, mostrar, dibujar y ocultar objetos.
Algo que me pareció curioso es que si le ponemos nombre a los elementos, este nombre debe ser único, ya que si no, al eliminar un elemento de una capa, cuando intentásemos eliminar el siguiente con el mismo nombre nos daría un error.
También me gustaría destacar que normalmente se suele comenzar a manipular la página con las sentencias JS cuando se ha cargado completamente, para ello simplemente debemos hacer lo siguiente:
window.onload = function(){
//Creacion de escenario, capas, elementos, etc...
};
Por el momento aquí dejo la pequeña introducción a esta gran librería, en caso de estimarlo oportuno, añadiré más entradas en el futuro. Un saludo y espero que os animéis a usar esta librería porque está genial.
