Implementación de un sistema de coordenadas con las propiedades de zoom y pan
Ya sea para encontrar la ubicación aproximada en un mapa geográfico o las coordenadas de unos píxeles en una imagen, necesitamos un sistema de referencia. Rene Descartes inventó el plano cartesiano, que en 2 dimensiones se representa mediante dos líneas perpendiculares entre sí cuyo eje vertical y horizontal interseccionan en el punto 0,0.
Para crear este sistema de coordenadas utilizando JavaScript y la API Canvas de HTML, podríamos empezar dibujando los ejes: escribiríamos un bucle para trazar lineas horizontales y otro para las verticales usando la instrucción ctx.lineTo(x, y)
. Y luego podríamos añadir la funcionalidad de movernos por el plano mediante eventos del ratón, guardando la posición inicial al primer clic y después al soltar haríamos la traslación de las lineas del plano restando la diferencia de la posición actual con la guardada anteriormente para simular el efecto de "arrastrar" los objetos.
Pero si aun quisieramos complicarlo más, bastaría con añadirle la opción de poder aumentar o disminuir la escala del plano de forma infinita.
En este artículo haremos todo lo anterior. Explicaremos qué herramientas matemáticas se necesitan y proporcionaremos el código para generar un sistema de coordenadas 2d usando JavaScript.
Si quieres ver directamete el código en acción, aquí puedes ver el resultado final del sistema de coordenadas en 2d:
Lo primero es crear el elemento canvas y añadirlo dentro del elemento <body>
Para iniciar la aplicación crearemos una nueva instancia de la clase CoordinateSystem pasándole el elemento canva como parámetro:
Puedes ver el código completo en el ejemplo anterior. Aquí sólo comentaremos los puntos más importantes.
Para dibujar la cuadrícula de lineas, lo haremos en el método drawGridLines()
. Dibujaremos unas lineas más gruesas y otras más finas:
Para dibujar los ejes x e y, usaremos el método drawAxes
. Obtendremos el origen 0,0 como punto de referencia y luego trazaremos primero la linea horizontal y luego la vertical.
Hay dos métodos básicos que son clave para gestionar la visualización del gráfico, estos son canvasCoords
que convierte cualquier posición x e y a la posición que tiene dentro del canvas y fromCanvasCoords
que hace justo lo contrario, a partir de unas coordenadas del canvas nos devuelve la posición x e y reales.
Como ves, ambos métodos utilizan operaciones matemáticas con matrices para aplicar traslaciones de las coordenadas. Mira detallademente el código de la función Matrix
en el código de ejemplo para ver los métodos implementados para operar con matrices.
Lo que en inglés se conoce como pan & zoom. Gestionaremos la traslación con el método translate
que llamaremos desde el evento mousemove (cuando el ratón esté pulsado y en movimiento) para generar el efecto de mover el gráfico. Y algo parecido conn el método zoom
.
Este código es sólo un ejemplo de cómo implementar un sistema de coordenadas, pero si quieres ampliarlo te propongo varias mejoras: