Manipulando el Canvas HMLT5 Usando Konva: Parte 5, Eventos

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

Si has estado siguiendo esta serie desde el principio, ahora deberías estar muy cómodo con formas, grupos, y capas. También deberías poder dibujar fácilmente algunas formas básicas y complejas sobre el lienzo usando Konva. Si planeas usar Konva para crear algunas aplicaciones interactivas o juegos, aprender como enlazar eventos a diferentes formas sobre el escenario es el siguiente paso lógico.

En este tutorial, aprenderás cómo enlazar eventos a cualquier forma usando Konva. También aprenderás sobre delegación y propagación de eventos. Algunas veces, podrías necesitar el control de la región de toque de una forma así como disparar eventos mediante programación. Estaremos discutiendo estos dos temas también.

Enlazando Eventos a una Forma

Puedes enlazar diferentes eventos a cualquier forma usando Konva con la ayuda del método on(). Todo lo que tienes que hacer es pasar el nombre del evento como el primer parámetro de la función para ser ejecutado cuando el evento ocurra como el segundo parámetro. Puedes usar Konva para detectar mouseup, mousedown, mouseenter, mouseleave, mouseover, mousemove, click, y dblclick. Adicionalmente, Konva te permite detectar eventos wheel, dragstart, dragmove, y dragend.

Aquí está un ejemplo que detecta eventos mousedown y mouseleave sobre un polígono regular (hexágono). De manera similar el círculo más pequeño está atado a los eventos mouseover y mouseup y el círculo más grande está atado a los eventos mouseenter, mouseleave, y mousemove.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var polyA = new Konva.RegularPolygon({
  x: 125,
  y: 125,
  sides: 6,
  radius: 80,
  fill: "yellow",
  stroke: "black",
  strokeWidth: 5
});

var circA = new Konva.Circle({
  x: 275,
  y: 225,
  height: 100,
  fill: "orange",
  stroke: "black"
});

var circB = new Konva.Circle({
  x: 475,
  y: 275,
  radius: 100,
  fill: "red",
  stroke: "black"
});

layerA.add(polyA, circA, circB);

stage.add(layerA);

polyA.on("mousedown", function() {
  polyA.sides(polyA.sides() + 1);
  layerA.draw();
});

polyA.on("mouseleave", function() {
  var totalSides = polyA.sides();
  if(totalSides > 3) {
    polyA.sides(polyA.sides() - 1);
  }
  layerA.draw();
});

circA.on("mouseover", function() {
  circA.strokeWidth(10);
  layerA.draw();
});

circA.on("mouseup", function() {
  circA.strokeWidth(5);
  layerA.draw();
});

circB.on("mouseenter", function() {
  stage.container().style.cursor = "crosshair";
});

circB.on("mouseleave", function() {
  stage.container().style.cursor = "default";
});

circB.on("mousemove", function() {
  var pointerPos = stage.getPointerPosition();
  var r = pointerPos.x % 255;
  var g = pointerPos.y % 255;
  circB.fill("rgb(" + r + ", " + g + ", 100)");
  layerA.draw();
});

Si un usuario presiona cualquier botón del ratón mientras el cursor está dentro del polígono regular, incrementamos el número de lados del polígono en 1. El método sides() puede ser usado sin parámetro para obtener el número de lados para un polígono o usado con parámetro para establecer el número de lados de un polígono. También puedes obtener el número de lados usando getSides() y establecer el número de lados usando setSides(). Los lados del polígono son reducidos en uno cada vez que el cursor del ratón abandona el polígono.

Para el círculo más pequeño, el evento mouseover es usado para establecer el valor de ancho de trazo a 10. El evento mouseup cambia el valor de ancho de trazo a 5. Ten en mente que el evento mouseup tiene que ocurrir dentro del círculo mismo. Por ejemplo, el ancho de trazo no cambiará a 5 si presionas el botón del ratón dentro del círculo y luego lo sueltas solo después de que el cursor está fuera del círculo.

En el caso del círculo más grande, estamos usando el evento mousemove para cambiar su color fill. También estamos cambiando el cursor del círculo más grande usando stage.container().style.cursor siempre que el cursor se mueva dentro y fuera del círculo.

Please accept marketing cookies to load this content.

Una cosa importante que deberías tener en mente es que tienes que llamar al método draw() sobre la capa respectiva si los escuchadores de evento para cualquier forma resultan en un cambio con atributos como color de relleno, ancho de trazo, etc. De otro modo, los cambios no serán reflejados en el lienzo.

No tienes que enlazar un evento a la vez a una forma. También puedes pasar una cadena delimitada por espacio conteniendo múltiples tipos de evento al método on(). Esto enlazará todos los eventos listados en la cadena a esa forma particular.

Konva también soporta versiones móviles correspondientes a todos esos eventos. Por ejemplo, puedes registrar touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, y dragend usando Konva en dispositivos móviles.

También puedes disparar cualquiera de esos eventos para una forma particular usando el método fire(). De manera similar, Konva te permite disparar eventos personalizados como throwStones.

Removiendo Escuchadores de Evento

Puedes remover cualquier escuchador de evento adjunto a una forma con la ayuda del método off() en Konva. Tienes que especificar el nombre de evento que no quieres escuchar.

También puedes crear múltiples enlaces de evento para una sola forma. Por ejemplo, digamos que tienes y círculo y quieres incrementar el radio del círculo cada vez que el cursor pasa sobre este, hasta cierto límite. También podrías querer cambiar el color de relleno del círculo en cada evento mouseover.

Una opción es hacer ambas tareas dentro de un solo escuchador de evento mouseover y dejar de actualizar el radio después. Otra opción es crear dos escuchadores de evento mouseover con diferentes nombres de espacio para identificarlos. De este modo, podrás incrementar el radio y cambiar el color de relleno de forma independiente.

circA.on("mouseover.radius", function() {
  var curRadius = circA.radius();
  if(curRadius < 150) {
    circA.radius(curRadius + 5);
    layerA.draw();
  } else {
    circA.off('mouseover.radius');
  }
});

circA.on("mouseover.fillcolor", function() {
  var h = Math.floor(Math.random()*360);
  var color = "hsl(" + h + ", 60%, 60%)";
  circA.fill(color);
  layerA.draw();
});

Deberías notar que he agregado layerA.draw() dentro de ambos escuchadores. Si no puedes agregarlo dentro del escuchador mouseover.fillcolor, el color dejará de actualizarse tan pronto como el radio sea 150.

Please accept marketing cookies to load this content.

En vez de remover un escuchador de evento a la vez, también puedes dejar de escuchar a todos los eventos atados a una forma usado el método setListening(). Puedes pasar true o false a este método para encender o apagar los escuchadores de eventos. Ten en mente que también tendrás que re-dibujar la gráfica de hito de la capa afectada llamando al método drawHit() justo después de que llames a setListening().

Delegación y Propagación de Evento

En vez de enlazar directamente a todas las formas presentes sobre una capa, también puedes enlazar un evento a la capa misma. Después de eso, puedes determinar cuál forma disparó el evento usando la propiedad target del objeto de evento. De este modo, Konva te permite delegar efectivamente eventos desde el padre a sus hijos.

Digamos que estás escuchando eventos de clic sobre un círculo dibujado en una capa en Konva. El mismo evento de clic se propaga al grupo contenedor así como a la capa contenedora. Esto podría o no ser el comportamiento deseado. Si quieres prevenir que el evento burbujee hacia adentro de una forma hasta la capa contenedora, puedes establecer la propiedad cancelBubble para el objeto de evento a true.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var circA = new Konva.Circle({
  x: 300,
  y: 200,
  height: 100,
  fill: "orange",
  stroke: "black",
  name: "Orange Circle"
});

var starA = new Konva.Star({
  x: 125,
  y: 125,
  innerRadius: 25,
  outerRadius: 75,
  rotation: 90,
  fill: "blue",
  stroke: "black",
  name: "Blue Star"
});

var ringA = new Konva.Ring({
  x: 475,
  y: 275,
  innerRadius: 25,
  outerRadius: 75,
  fill: "brown",
  stroke: "black",
  name: "Brown Ring"
});

var textA = new Konva.Text({
  text: "",
  fontFamily: "Calibri",
  fontSize: 24,
  fill: "black",
  x: 10,
  y: 10
});

layerA.add(circA, starA, ringA, textA);

stage.add(layerA);

layerA.on("click", function(e) {
  var shapeName = e.target.attrs.name;
  textA.setText(shapeName);
  layerA.draw();
});

He usado la propiedad name para asignar un nombre a cada una de nuestras formas. El método setText() es después usado para cambiar el texto dentro de textA al nombre de la forma que acabamos de dar clic.

Please accept marketing cookies to load this content.

Regiones de Toque Personalizadas

En el ejemplo de arriba, el anillo registró un clic sobre él cuando el clic ocurrió entre el círculo interior y exterior. ¿Qué pasa si quisieras registrar el clic dentro del círculo pequeño también? Konva te permite definir regiones de toque personalizadas usando la propiedad hitFunc. Esta propiedad acepta una función como su valor, y esta función es usada para dibujar la región personalizada.

El siguiente ejemplo te muestra cómo crear regiones de toque personalizadas. Ahora deberías poder dar clic en el área entre los picos de la estrella y aún registrar un clic. Con la ayuda de las regiones de toque personalizadas, puedes asegurar que los usuarios no tienen que dar clic en ubicaciones exactas para registrar un evento de clic. Esto puede resultar en una mejor experiencia de usuario cuando se trata con formas más pequeñas o complejas.

var starA = new Konva.Star({
  x: 125,
  y: 125,
  innerRadius: 25,
  outerRadius: 75,
  rotation: 90,
  fill: "blue",
  stroke: "black",
  name: "Blue Star",
  hitFunc: function(context) {
    context.beginPath();
    context.arc(0, 0, this.getOuterRadius(), 0, Math.PI * 2, true);
    context.closePath();
    context.fillStrokeShape(this);
  }
});

var ringA = new Konva.Ring({
  x: 475,
  y: 275,
  innerRadius: 25,
  outerRadius: 75,
  fill: "brown",
  stroke: "black",
  name: "Brown Ring",
  hitFunc: function(context) {
    context.beginPath();
    context.arc(0, 0, this.getOuterRadius(), 0, Math.PI * 2, true);
    context.closePath();
    context.fillStrokeShape(this);
  }
});

Please accept marketing cookies to load this content.

Ideas Finales

En este tutorial. Hemos cubierto diferentes eventos de móvil y escritorio que puedes enlazar a cualquier forma en Konva. Puedes adjuntar estos eventos uno a la vez o muchos de ellos al mismo tiempo. Konva también te permite disparar tus propios eventos personalizados con programación usando el método fire(). La última sección de este turorial te mostró cómo definir tus propias regiones de toque para poder detectar toques sobre un área que podría ser más grande o pequeña que la forma original.

Combinando el conocimiento de este tutorial con otros en la serie, ahora deberías poder dibujar una variedad de formas sobre el lienzo y permitir a tus usuarios interactuar con ellos.

Si tienes cualquier pregunta relacionada con este tutorial, siéntete libre de hacérmelo saber en los comentarios.