Comenzando Con Paper.js: Interacción de Usuario

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

Después de leer los dos primeros tutoriales, deberías ser capaz de crear trazados y algunas figuras básicas predefinidas. También deberías poder simplificar o aplanar tus trazados así como dibujarlos en diferentes capas y fusionarlos.

Aunque hemos recorrido un largo camino, aún hay una cosa que falta. Haste este punto, no ha habido interacción entre nuestro canvas y el usuario. Sería bueno si pudiéramos darle a los usuarios la habilidad para interactuar con varios trazados o dibujar algo por ellos mismos. Este tutorial cubrirá todos los básicos de interacción de usuario, comenzando con la variable tool.

Tool y ToolEvent

Hay una variable global tool que solo existe en scripts que contienen funciones handler para interactuar con el ratón o el teclado. Esta variable te da acceso a propiedades como minDistance, que es la distancia mínima después de la cuál el ratón puede disparar de nuevo el evento onMouseDrag, desde que fue disparado por última vez. De manera similar, la propiedad maxDistance te permite especificar una distancia máxima después de la cuál el evento onMouseDrag necesita ser disparado otra vez.

Paper.js también tiene un objeto ToolEvent. Es una extensión del objeto de evento y el único parámetro que se pasa a todos los eventos de ratón. Contiene toda la información relevante sobre estos eventos de ratón como:

type, que te dice si el evento es mouseup, mousedown, mousemove o mousedrag.
point, que te da la posición del ratón cuando el evento fue disparado.
delta, que te da la distancia entre la posición actual y última del ratón cuando el evento fue disparado.
count, que te da el número de veces que el evento del ratón fue disparado.
item, que te da el elemento que fue presentado en la ubicación del evento de ratón. Si el elemento es parte de un trazado group o compound entonces el nivel más alto de trazado group o compound es devuelto.
lastPoint, que te da la posición del ratón cuando el evento fue disparado por última vez.
downPoint, que te da la posición del ratón en coordenadas de proyecto cuando fue se dio clic por última vez.
middlePoint, que te da el punto en la mitad de lastPoint y point.

Deberías tener todos estos en mente porque serán usados frecuentemente en la mayoría de tus proyectos.

Interacciones de Ratón

Paper.js tiene varias funciones handler que son llamadas automáticamente para manejar diferentes eventos de ratón. Las tres funciones handler de ratón están listadas abajo.

function onMouseDown(event) {
  // Do something
  console.log('Mouse pressed!');
}

function onMouseDrag(event) {
  // Do something else
  console.log('Mouse dragged!');
}

function onMouseUp(event) {
  // Do anything
  console.log('Mouse released!');
}

Creemos un demo básico basado en los eventos onMouseDown y onMouseUp. Cada vez que el usuario presione un botón del ratón, crearemos un nuevo Path y marcaremos ese punto como el inicio de nuestro Path.

Cada vez que el usuario liberé el botón del ratón, agregaremos un nuevo punto como el final de nuestro Path. Esto creará una línea recta desde el punto en donde el botón del ratón fue presionado al punto en donde fue liberado. Aquí está el código:

var aPath; 

function onMouseDown(event) { 
  aPath = new Path(); 
  aPath.strokeColor = 'purple'; 
  aPath.strokeWidth = event.point.x/10;
  aPath.add(event.point); 
} 
  
function onMouseUp(event) { 
  aPath.add(event.point); 
}

También he establecido el strokeColor a morado y strokeWidth a un décimo del valor de la coordenada x usando la propiedad event.point. Si intentas dibujar algunas líneas verticales en el área gris de abajo, notarás que todas tienen un ancho directamente proporcional a su distancia desde el lado izquierdo.

Please accept marketing cookies to load this content.

Ahora, creemos algunos círculos usando el evento onMouseDrag. Cada vez que un evento de arrastrar es disparado, dibujaremos un círculo con su centro en el punto medio del último y actual punto de arrastre. El radio del círculo dependerá directamente de la velocidad de arrastre del usuario.

Para ubicar el centro de nuestro círculo podemos usar la propiedad middlePoint que discutimos en la sección previa. Para determinar el radio del círculo, podemos usar la propiedad delta y dividimos el resultado entre 2. Aquí está el código que necesitamos:

tool.maxDistance = 50;
tool.minDistance = 4;

function onMouseDrag(event) {
  var circle = new Path.Circle({
    center: event.middlePoint,
  radius: event.delta.length / 2
  });
  
  circle.fillColor = 'pink';
  circle.strokeColor = 'black';
}

Si el usuario arrastrara el ratón demasiado rápido o demasiado lento, los círculos se volverían muy grandes o pequeños.

Este problema puede ser resuelto usando las propiedades maxDistance y minDistance. Si el usuario arrastra demasiado rápido, la propiedad maxDistance disparará el evento arrastrar cada 50 pixeles. Si la velocidad de arrastre del usuario es demasiado lenta, la propiedad minDistance no será disparada hasta que el límite de distancia mínima que especificamos haya sido alcanzada. Puedes probar el código de abajo arrastrando y soltando tu ratón en el área gris de abajo:

Please accept marketing cookies to load this content.

Interacciones de Teclado

El objeto event tiene tres propiedades que puedes usar para tus interacciones con el teclado. La propiedad event.key te dirá cuál tecla fue presionada, y la propiedad event.character te dirá el caracter que fue generado al presionar la tecla. Para determinar si fue un evento keyup o keydown, puedes usar la propiedad event.type.

Usemos estas opciones juntas para crear círculos diminutos y moverlos. Echa un vistazo al código de abajo:

var step = 10;
var centerPoint = new Point(100, 100);
  
function onKeyDown(event) { 
     
  var circle = new Path.Circle(centerPoint, 3);
  circle.fillColor = 'pink';
  circle.strokeColor = 'black';
  
  if(event.key == 'a') { 
    centerPoint -= new Point(step,0);
  } 
  // Code for other keys
     
}

Creamos una variable step que será usada para determinar la velocidad a la cuál nuestro círculo se mueve. La variable centerPoint almacena la ubicación del centro de nuestros círculos. El handler onKeyDown tiene el código para manejar todos los eventos keydown. Este evento es disparado continuamente siempre que una tecla esté siendo presionada.

Esta es la razón de que nuevos círculos sean creados continuamente. Basado en la tecla presionada, cambiamos el valor de centerPoint para mover nuestro recién creado círculo a una ubicación diferente. Puedes ver el código en acción en el demo de abajo:

Please accept marketing cookies to load this content.

Algunas teclas, por ejemplo las teclas Shift y Option, no producen directamente un caracter cuando son presionadas. Estas teclas son llamadas teclas modificadoras. El objeto event tiene una propiedad event.modifiers que puedes usar para determinar la tecla modificadora que fue presionada. Considera el código de abajo:

var path; 
  
function onMouseDown(event) { 
  path = new Path(); 
  path.strokeColor = 'black';
  path.strokeWidth = 2; 
  path.add(event.point); 
} 
  
function onMouseDrag(event) {  
  if(event.modifiers.shift) { 
    path.lastSegment.point = event.point;
    path.simplify();
  } else { 
    path.add(event.point); 
  } 
}

Siempre que un usuario presione un botón del ratón, el handler onMouseDown crea un nuevo Trazado y agrega un punto a este. Después de que empiezas a arrastrar, el handler onMouseDrag agrega un nuevo punto a este en cada evento de arrastre.

Si estás arrastrando el ratón con la tecla Shift presionada, el handler lo detecta con la propiedad event.modifiers.shift. En ese caso, en vez de agregar un nuevo punto en cada evento de arrastre, este solo establece las coordenadas del último segmento a la ubicación actual del puntero del ratón. También simplifica el trazado completo que fue dibujado. Puedes arrastrar tu ratón en el área gris de abajo para ver cómo se comporta el trazado cuando la tecla Shift es presionada.

Please accept marketing cookies to load this content.

Si la tecla Shift parece no funcionar, es probablemente porque el canvas no tiene el enfoque. En ese caso, debes dar clic primero dentro del pequeño espacio blanco bajo el canvas para darle foco.

Ideas Finales

Los eventos que discutimos hoy cubren la mayoría de escenarios de interactividad. Como es evidente del tutorial, no es difícil manipular los elementos en un canvas basado en las acciones del usuario. La mejor manera de aprender es practicando. Así que me gustaría sugerirte que crees tus propios demos combinando todo lo que has aprendido en los tres tutoriales hasta este punto.

Si tienes alguna pregunta en relación a este tutorial, por favor házmelo saber en los comentarios.