Cuadrícula para calcar sin deformar la imagen: coordenadas y escalado en Canvas

Cuando una imagen se adapta a una pantalla, la cuadrícula de ayuda puede desalinearse si se estira la foto o se dibuja sobre todo el lienzo. El problema es geométrico: la imagen tiene una escala y un desplazamiento.

El problema y el alcance del ejemplo

La ficha de TraceDraw: Calcar y Dibujar resume su función así: «Aprende a dibujar y hacer bocetos calcando imágenes con la cámara y cuadrícula.» TraceDraw anuncia calco asistido con cámara y cuadrícula. En este laboratorio reproducimos solo la superposición de una cuadrícula sobre una imagen respetando su relación de aspecto. El ejemplo web no pretende describir el motor Android de TraceDraw.

Cómo reproducir la idea

Copia el siguiente contenido en cuadricula.html, ábrelo en un navegador y carga una foto desde tu equipo. No se envía ningún archivo a un servidor.

<!doctype html><html lang="es"><meta charset="utf-8"> <title>Cuadrícula de referencia</title> <input id="archivo" type="file" accept="image/*"> <canvas id="lienzo" width="800" height="500" style="max-width:100%;border:1px solid #888"></canvas> <script> const canvas = document.querySelector('#lienzo'); const ctx = canvas.getContext('2d'); document.querySelector('#archivo').addEventListener('change', e => { const file = e.target.files[0]; if (!file) return; const url = URL.createObjectURL(file); const img = new Image(); img.onload = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); const scale = Math.min(canvas.width / img.width, canvas.height / img.height); const w = img.width * scale, h = img.height * scale; const x = (canvas.width - w) / 2, y = (canvas.height - h) / 2; ctx.drawImage(img, x, y, w, h); ctx.strokeStyle = 'rgba(255, 0, 0, .7)'; for (let col = 0; col <= 8; col++) { const xx = x + (w * col / 8); ctx.beginPath(); ctx.moveTo(xx, y); ctx.lineTo(xx, y + h); ctx.stroke(); } for (let row = 0; row <= 8; row++) { const yy = y + (h * row / 8); ctx.beginPath(); ctx.moveTo(x, yy); ctx.lineTo(x + w, yy); ctx.stroke(); } URL.revokeObjectURL(url); }; img.src = url; }); </script></html>

Qué demuestra el código

El factor Math.min(...) evita deformar la imagen. El desplazamiento (x, y) la centra cuando aparecen márgenes. Las líneas se dibujan exclusivamente dentro del rectángulo visible de la foto, de manera que la cuadrícula coincide con el contenido.

Pruebas recomendadas

Prueba una imagen vertical y otra panorámica. Comprueba que ninguna se estira y que las 8 columnas por 8 filas mantienen su alineación dentro de la imagen. Cambia el valor 8 por 12 para variar la densidad de guías.

Límites que conviene reconocer

Este Canvas no corrige perspectiva de una cámara real, inclinación de papel ni distorsión de lente. Para calco por cámara necesitaríamos además transformaciones de coordenadas, orientación del sensor y calibración.

Qué aprendemos

El secreto de una superposición estable es compartir el mismo espacio de coordenadas entre imagen y guías, no ajustar ambos elementos por separado.

Contexto y enlaces del autor

El tema se relaciona con las funciones declaradas públicamente de TraceDraw: Calcar y Dibujar, una aplicación Android de AppInitDev. El código anterior es un ejemplo independiente: no se ha inspeccionado el repositorio privado ni se afirma que sea la implementación interna de la app. La referencia aparece al final para ofrecer contexto, no como requisito para completar el tutorial.