Pizarra Online

Una pizarra online tiene que hacer dos cosas muy distintas a la vez. Debe sentirse como un rotulador sobre cristal — instantánea, fluida, indulgente con el pulso — y a la vez comportarse como un documento que puedes editar, reorganizar y exportar limpiamente. Esta herramienta lo resuelve con una única escena vectorial unificada: cada marca del tablero, desde un rectángulo hasta un trazo a mano alzada, es un objeto estructurado y no un parche de píxeles. Entender cómo se almacena, edita y exporta esa única escena explica por qué cada elemento sigue siendo editable, por qué el lápiz se siente natural y por qué las exportaciones salen nítidas a cualquier tamaño.

La Escena: Todo es Dato, no Píxeles

Cuando dibujas un rectángulo, una flecha, una nota adhesiva, una línea de texto o un trazo a mano alzada, el tablero no lo "pinta" sobre una rejilla fija de puntos. Registra un objeto — su tipo, posición, tamaño, color, grosor de trazo, estilo de línea y relleno — en una lista ordenada llamada la escena. Como cada elemento es dato, luego puedes seleccionarlo, moverlo, rotarlo, recolorearlo, cambiar su orden de apilamiento o borrarlo sin alterar nada de lo que hay debajo. En cada fotograma, la herramienta vuelve a dibujar toda la escena a partir de esta lista sobre un <canvas> HTML, así que lo que ves siempre es un reflejo fiel de los datos subyacentes.

Detección de Impactos: Saber Qué Has Pulsado

Seleccionar un objeto requiere responder una pregunta geométrica: ¿está el cursor sobre esta forma? La herramienta usa una detección de impactos exacta por tipo. Rectángulos, notas adhesivas e imágenes se prueban contra su caja envolvente; las elipses usan la ecuación de la elipse; triángulos y rombos usan una prueba de punto-en-polígono; y las formas abiertas — líneas, flechas, conectores y trazos a mano alzada — miden la distancia perpendicular del cursor a cada segmento, ampliada por el grosor del trazo para que las líneas finas sigan siendo fáciles de agarrar. Los objetos se prueban de arriba abajo, así que un clic siempre selecciona el que está visualmente encima. La misma detección de impactos impulsa el borrador de objetos: en lugar de frotar píxeles, encuentra el trazo o la forma completa bajo el cursor y lo elimina de una pieza.

Trazos Suaves a Mano Alzada como Vectores

Dibujar a mano alzada es distinto de colocar una forma, pero el resultado sigue siendo un objeto vectorial. Un puntero emite un flujo de posiciones, y unirlas con segmentos rectos se vería visiblemente dentado. Para mantener la línea suave, el trazo se dibuja a través de los puntos medios de muestras consecutivas usando curvas cuadráticas, y una spline de Catmull-Rom de la biblioteca de geometría compartida redondea la trayectoria donde debe remuestrearse. El trazo terminado se guarda como un objeto draw — una lista de puntos suavizada — lo que significa que una línea de lápiz o subrayador es totalmente seleccionable, movible, recolorable, rotable y reordenable como cualquier otro objeto. El subrayador es simplemente un trazo más ancho y semitransparente; no hay ninguna superficie de píxeles separada en toda la cadena.

Organizar, Rotar y Agrupar

Como cada marca es un objeto, el tablero ofrece verdadera capacidad de edición sobre tu diseño. Selecciona algo y aparece un tirador de rotación encima — arrastra para rotar, y mantén Mayús para ajustar a pasos de 15°; funciona igual para formas, texto, notas adhesivas e imágenes. Selecciona varios objetos a la vez para alinearlos y distribuirlos, o redimensiona toda la selección junta (mantén Mayús para conservar las proporciones). Los controles de orden de capas traen un objeto al frente, hacia adelante, hacia atrás o al fondo; puedes agrupar y desagrupar objetos para que se muevan como uno; y puedes bloquear un objeto para protegerlo de moverse, redimensionarse o editarse. Un boceto rápido y tosco puede ordenarse automáticamente con el reconocimiento inteligente de formas, que ajusta un garabato a una forma limpia. Mientras dibujas, el ajuste a los bordes y centros de otros objetos muestra guías de alineación, y una cuadrícula de puntos y reglas opcionales mantienen todo ordenado. Haz zoom con la rueda del ratón y desplázate con la barra espaciadora o arrastrando con el botón central para moverte por un tablero grande.

Exportar: Una Escena, Cuatro Formatos

Todas las exportaciones parten de una única descripción serializada del tablero, y como esa descripción es enteramente vectorial, también lo son las exportaciones. Para SVG, la escena se convierte en un documento vectorial autónomo: cada elemento se convierte en un elemento SVG real — un rectángulo es un rect, una elipse un ellipse, un triángulo o rombo un polygon, una línea un line, y un trazo a mano alzada un path, junto a text e image. No hay ninguna imagen incrustada en todo el archivo, así que el SVG escala a cualquier tamaño sin pérdida y se abre para editar en herramientas como Inkscape o Illustrator. Para PNG y PDF, ese mismo SVG vectorial se dibuja sobre un canvas fuera de pantalla al tamaño de salida elegido y se lee de vuelta como imagen plana; el PDF simplemente incrusta esa imagen en una sola página. Las dimensiones de salida las calcula un motor de dimensionado que admite píxeles exactos, una opción 2× y hojas de impresión (A4/A3 a 300 PPP), siempre limitado a un techo seguro en memoria para que una petición demasiado grande no produzca un canvas en blanco en navegadores móviles. También puedes copiar el tablero al portapapeles como PNG para pegarlo al instante en otra aplicación. Por último, la exportación JSON escribe toda la escena en un archivo que puedes reabrir para seguir editando; al cargarlo se valida para que un archivo corrupto o antiguo nunca cargue un tablero roto.

Autoguardado, Pantalla Completa y Flujo con Teclado

Como perder un boceto duele, el tablero envía con un retardo una copia de la escena actual al almacenamiento local de tu navegador tras cada cambio, y ofrece restaurarla la próxima vez que vuelvas — íntegramente en tu dispositivo, sin cuenta. Un modo nativo de pantalla completa expande el lienzo para llenar la pantalla, y también existe una pizarra a pantalla completa dedicada si prefieres empezar inmersivo. Los atajos de una tecla (lápiz, subrayador, borrador, formas, texto) junto con las combinaciones habituales de deshacer/rehacer, las capas con Ctrl+] y Ctrl+[, agrupar con Ctrl+G, bloquear con Ctrl+Mayús+L, Suprimir para eliminar una selección, y las flechas del teclado para desplazar mantienen tus manos en el dibujo y no en los menús.

Consejos Prácticos

• Usa el lápiz para notas y el subrayador para enfatizar sin ocultar lo que hay debajo — ambos siguen siendo editables, así que puedes recolorear o mover un trazo después.
• Recurre a las formas, conectores y notas adhesivas cuando quieras diagramas ordenados — define un estilo de línea discontinua o punteada, elige las puntas de flecha, y reorienta un conector en cualquier momento.
• Agrupa las partes de un diagrama para que se muevan juntas, y bloquea una imagen de fondo para anotar sobre ella sin moverla.
• Exporta SVG para todo lo que puedas imprimir en grande o incrustar en un documento; usa PNG para compartir rápido, PDF para una página imprimible, o copia directamente al portapapeles.
• Guarda una escena JSON para el trabajo en curso y retómalo exactamente donde lo dejaste.