Manipulando el Canvas HTML5 Usando Konva: Parte 1, Comenzando

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

El lienzo HTML5 ha sido soportado por todos los navegadores populares desde hace mucho tiempo. Puedes usarlo para dibujar gráficos en un navegador con la ayuda de JavaScript. Los gráficos que pueden ser creados sobre un lienzo varían desde simples líneas y formas hasta composiciones fotográficas y animaciones.

En esta serie, aprenderás sobre una librería de lienzo muy útil llamada Konva. Puedes usar Konva para dibujar diferentes formas sobre el lienzo o el escenario. Entre otras cosas, la librería te permite escalar, rotar y animar todas estas formas y adjuntarles escuchadores de eventos.

Este tutorial se centrará en los conceptos fundamentales de la librería mientras proporciona un breve vistazo de diferentes características de la librería. Después de eso, continuaremos a temas más específicos y complejos. La librería comenzó como una rama de la popular librería KineticJS.

Escenario, Capas y Formas

Todo lo que dibujas con Konva requerirá que crees un escenario usando Konva.Stage. Puedes especificar el elemento contenedor de un escenario usando el atributo container. Cada escenario requiere también un valor de ancho y alto el cuál puede ser especificado usando los atributos width y height respectivamente.

Un solo escenario puede contener múltiples capas. Cada una de estas capas tendrán al menos dos generadores <canvas>. El gráfico de hito está oculto para los usuarios. Este es usado para realizar detección de eventos de alto desempeño. El gráfico de hito está oculto para los usuarios. Este es usado para realizar detección de eventos de alto desempeño.

Una sola capa puede contener múltiples formas, grupos de diferentes formas, o un grupo de grupos. El escenario, capas, grupos y formas actúan como nodos virtuales que pueden ser estilizados y transformados de forma individual.

Dibujando Capas Usando Konva

Antes de que creemos cualquier forma, necesitamos incluir la librería en tu proyecto. Hay múltiples maneras de hacer esto. Si estás usando administradores de paquetes, puedes ejecutar los siguientes comandos.

1	npm install konva
2	// OR
3	bower install konva

También puedes enlazar directamente a una versión minimizada de la librería hospedada en cdnjs y jsDelivr.

Una vez que has instalado la librería, puedes usar el siguiente código para crear formas rectangulares sobre el lienzo.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 75,
  y: 150,
  width: 200,
  height: 50,
  rotation: 45,
  fill: "blue",
  stroke: "black",
  strokeWidth: 4
});

var rectB = new Konva.Rect({
  x: 350,
  y: 50,
  width: 100,
  height: 250,
  cornerRadius: 50,
  fill: "red",
  stroke: "brown",
  strokeWidth: 10
});

layerA.add(rectA);
layerA.add(rectB);

stage.add(layerA);

Dibujar cualquier cosa sobre el lienzo es un proceso de cinco pasos. Primero, necesitas instanciar un escenario en donde las distintas formas se estarían dibujando usando Konva.Stage. Esto requiere que especifiques el ancho y alto del escenario así como el id del elemento contenedor el cuál contendrá al escenario. En nuestro caso, los rectángulos están siendo dibujados dentro de un div cuyo id es example.

En el siguiente paso, tienes que instanciar todas las capas que quieres generar en tu escenario. Solo estamos creando una capa sencilla en este ejemplo, pero puedes crear varias capas y agregarlas todas a un solo escenario. Diferentes capas pueden ser muy útiles cuando tu fondo consiste de elementos tanto estáticos como móviles. En tales casos, puedes agregar los elementos estáticos en una capa y los móviles en otra. Ya que no tendrás que actualizar el fondo estático después de cada re-dibujo, esto puede mejorar drásticamente el desempeño.

Después de crear las capas, puedes iniciar diferentes formas como rectángulos, elipses, estrellas y anillos que quieras mostrar sobre las capas. Finalmente, tienes que agregar las formas a las capas y las capas al escenario.

Please accept marketing cookies to load this content.

Creando Grupos en Konva

Agrupar diferentes formas es una buena idea cuando quieres administrar todas las capas como una sola unidad. Por ejemplo, digamos que has creado un coche usando dos círculos para las ruedas y dos bloques rectangulares para el cuerpo. Si quieres mover este coche hacia adelante sin crear un grupo, tendrás que trasladar individualmente todas las formas una por una. Un método más eficiente es solo agregar los círculos y rectángulos a un grupo y trasladarlos al mismo tiempo.

Para agregar cualquier forma a un grupo, necesitas usar el método add(), justo como hiciste cuando agregaste formas a una capa. También puedes agregar un grupo a otro grupo para crear entidades más complejas. Por ejemplo, podrías crear una persona dentro del carro como un grupo y agregar a esa persona al grupo que representa al carro.

En el siguiente ejemplo, he mantenido las cosas simples y solo creé un grupo carA. Después de eso, puedo rotar y escalar el carro entero a la vez.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var wheelA = new Konva.Ring({
  x: 130,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "First Wheel"
});

var wheelB = new Konva.Ring({
  x: 270,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "Second Wheel"
});

var frameA = new Konva.Rect({
  x: 80,
  y: 150,
  width: 240,
  height: 60,
  cornerRadius: 10,
  fill: "red",
  stroke: "black",
  name: "Bottom Frame"
});

var frameB = new Konva.Rect({
  x: 135,
  y: 90,
  width: 120,
  height: 60,
  cornerRadius: 10,
  fill: "orange",
  stroke: "black",
  name: "Top Frame"
});

var carA = new Konva.Group({
  x: 50,
  y: 0,
  rotation: 20,
  scaleX: 1.2
});

carA.add(wheelA, wheelB, frameA, frameB);

layerA.add(carA);

stage.add(layerA);

Please accept marketing cookies to load this content.

Encapado en Konva

Ya sabes sobre las capas en Konva. Encapar es algo diferente. Por defecto, todas las formas que agregas a una capa son dibujadas en el orden en el que fueron creadas. Esto significa que las formas agregadas a una capa después de las demás serán dibujadas encima de las otras formas.

Konva te permite controlar el orden en el cuál las formas son dibujadas usando diferentes métodos de encapado como moveToTop(), moveToBottom(), moveUp(), moveDown(), y zIndex().

El método moveToTop() dibujará la forma dada sobre todas las otras formas que han sido agregadas a la misma capa. Las formas dibujadas sobre una capa que fue agregada al escenario Konva después de la capa de nuestra forma específica permanecerá aún sobre nuestra capa. Es por esto que el círculo índigo en el siguiente ejemplo permanece debajo del círculo verde claro incluso después de llamar a moveToTop().

El método moveToBottom() dibujará la forma dada debajo de todas las otras formas que han sido agregadas a la misma capa. Al igual que moveToTop(), las formas se moverán al fondo de sus propias capas y no a las capas debajo de ellas.

Los métodos moveUp() y moveDown() mueven la forma sobre la cuál son llamadas, una posición sobre o debajo de su posición actual en la misma capa. El método zIndex() es usado para establecer el índice de la forma dentro de su capa padre. A diferencia de CSS, no puedes establecer un valor de zIndex arbitrario en Konva. Para una capa con 10 formas, el valor zIndex solo puede ser entre 0 y 9 (inclusivo).

Please accept marketing cookies to load this content.

En el ejemplo de arriba, puedes ver que solo presionar el botón “Indigo Top” no dibuja el círculo sobre todos los demás, mientras que presionar “Indigo Above all Others” lo posicionará encima. Esto es porque el último botón también mueve la capa que contiene al círculo índigo a la parte superior.

Ya que los círculos puedes ser arrastrados, sería una buena idea arrastrarlos sobre cada uno y ver cómo cambia la posición del círculo índigo cuando presionas botones diferentes.

Ideas Finales

Hemos cubierto algunos conceptos fundamentales relacionados a Konva en este tutorial. Ahora deberías poder dibujar algunas formas comunes sobre el lienzo y moverlas como un grupo. Este tutorial también te mostró cómo empujar una forma en particular hacia arriba o abajo en caso de empalme.

JavaScirpt se ha convertido en uno de los lenguajes de facto para trabajar en la web. No es sin su curva de aprendizaje, y hay muchos marcos de trabajo y librerías para mantenerte ocupado también. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en Envato Market.

Si tienes alguna pregunta relacionada con este tutorial, siéntete libre de dejarme saber en los comentarios. El siguiente tutorial te enseñará cómo dibujar formas básicas en Konva.