Visor y editor DWG/DXF online en navegador

Cómo funciona un visor DWG en navegador: del binario al píxel

Un archivo DWG (el formato nativo de AutoCAD desde 1982) no es un archivo de texto como DXF. Es un contenedor binario propietario, con versiones (R9, R10, …, R2018, R2020+) que cambian la estructura interna cada pocos años. Cada versión añade cifrado opcional, compresión y nuevos tipos de entidad, lo que hace que parsearlo desde cero sea un reto mayúsculo. La opción clásica en proyectos open source es LibreDWG, una librería en C de la FSF (gnu.org/software/libredwg) que cubre lectura y escritura. Compilarla a WebAssembly (~5 MB) es posible, pero penaliza la carga inicial y rompe el claim de "la página interactiva en menos de dos segundos".

Por eso esta herramienta adopta una estrategia mixta: un parser DXF en JavaScript (DXF es texto plano, mucho más fácil de parsear y suficiente para interoperabilidad con AutoCAD, BricsCAD, LibreCAD, QCAD, FreeCAD) basado en la librería dxf-parser (gdsestimating/dxf-parser, MIT, ~30 KB), complementado por un parser DWG básico que detecta las versiones más comunes (R12 a R2018) extrayendo entidades 2D esenciales cuando el archivo incluye un bloque DXF embebido. Cuando abres un DWG, la herramienta primero intenta leer la cabecera, identifica la versión y mapea cada entidad binaria conocida (línea, polilínea, círculo, arco, texto) a una representación interna común. Las entidades no reconocidas se omiten y se avisa en la barra de estado. El resultado se vuelca a un modelo de datos en memoria que el canvas entiende, y que también es serializable a JSON para que puedas Guardar el proyecto y retomarlo otro día.

El modelo de datos: entidades, capas y estilos

Toda la información del plano vive en una estructura plana: una lista de entidades (cada una con su tipo, color, grosor, capa y geometría) y un registro de capas (cada capa tiene nombre, color propio, visibilidad y estado activo). El lienzo recorre las entidades en orden, agrupa por capa para no cambiar de color/estado más de lo necesario, y dibuja cada tipo con su primitiva correspondiente: lineTo para líneas, arc para arcos, ellipse para círculos (con misma relación de aspecto), fillText para textos. La rejilla se pinta aparte una sola vez por frame sobre un buffer virtual del tamaño del mundo, lo que permite que el zoom extremo no se vea pixelado.

Coordenadas mundo vs. coordenadas pantalla

El lienzo maneja dos sistemas de coordenadas. Las coordenadas mundo son las del archivo DWG/DXF (normalmente metros o milímetros, en el origen que el autor del plano eligió). Las coordenadas pantalla son píxeles dentro del <canvas>. Para pasar de unas a otras hay una matriz de transformación con un offset y una escala. El zoom multiplica la escala; el pan suma al offset. El render aplica esta transformación al context del canvas antes de pintar. El snap a rejilla redondea las coordenadas mundo del cursor al múltiplo más cercano del paso configurado.

Cómo usar la herramienta paso a paso

1. Cargar el archivo. Pulsa Abrir y selecciona un .dwg o .dxf de tu disco. También puedes arrastrar directamente el archivo sobre el lienzo. La barra de estado confirmará la versión detectada y el número de entidades cargadas. Si no tienes un archivo a mano, pulsa Probar con ejemplo para cargar un DXF de muestra con un plano de tres habitaciones.
2. Explorar el plano. Usa la rueda del ratón para hacer zoom (centrado en la posición del cursor) y arrastra con el botón central —o con la herramienta Seleccionar y el botón izquierdo— para mover el encuadre. El botón Encuadrar del panel derecho restaura la vista para que entre todo el plano.
3. Elegir capa activa. En el panel Capas selecciona la capa en la que quieres dibujar. Cambia el color y el grosor arriba si quieres diferenciar visualmente la nueva geometría.
4. Dibujar. Selecciona una herramienta (línea, polilínea, rectángulo, círculo, texto). Haz clic para colocar el primer punto, otro clic para el segundo, etc. Para la polilínea, cada clic añade un vértice; pulsa Esc o el botón flotante Terminar polilínea cuando acabes. El círculo se define por dos clics: centro y punto del perímetro.
5. Borrar y corregir. La herramienta Borrar elimina cualquier entidad sobre la que hagas clic. Para rehacer, usa Ctrl+Z. La herramienta Seleccionar permite arrastrar entidades a otra posición.
6. Exportar. Cuando el plano esté listo, exporta a PNG (imagen raster para insertar en documentos), a SVG (vector escalable para imprenta o web), a DXF (formato CAD estándar para abrirlo en AutoCAD, BricsCAD, LibreCAD, QCAD, FreeCAD) o a JSON (proyecto completo para re-abrirlo más tarde). El archivo descargado se genera al vuelo en el navegador, sin servidor intermedio.

Casos prácticos detallados

Caso 1 — Revisar un plano de un proveedor. Te llega por email un plano planta-oficina.dwg y quieres revisarlo antes de imprimirlo. Lo abres aquí, haces zoom a las cotas, mides visualmente las distancias con la rejilla (paso 10 cm por defecto), anotas con textos y flechas cualquier duda, y exportas el resultado a PNG para adjuntarlo en tu respuesta. Tiempo: 5 minutos, instalación: cero.

Caso 2 — Limpiar un DXF antes de imprimir. Recibes un DXF enorme generado por otro programa que trae capas que no necesitas (capas de referencia externa, capas de sombreado, capas con nombres crípticos). Abres el archivo, ocultas las capas que no te interesan con el ojo del panel de capas, encuadras, exportas a SVG y lo mandas a imprenta. La imprenta escala el SVG al tamaño real sin pérdida de calidad.

Caso 3 — Esquema de planta para una reforma. Estás planificando mover un tabique y necesitas un esquema rápido de la nueva distribución. No quieres abrir AutoCAD, ni QCAD, ni FreeCAD. Abres esta herramienta, pulsas Probar con ejemplo para ver el formato del lienzo, dibujas las paredes como rectángulos, pones las cotas con textos, etiquetas las habitaciones y exportas a PNG para enseñárselo al albañil.

Caso 4 — Clase de dibujo técnico. Un profesor de bachillerato quiere que sus alumnos practiquen plantas y alzados sin instalar software. Comparte la URL de esta herramienta, los alumnos dibujan desde cero, exportan a DXF y se lo entregan. La instalación cero elimina la barrera técnica.

Consejos y trucos

• Trabaja por capas desde el principio. Paredes en una capa, cotas en otra, muebles en otra. Cuando exportes a DXF, tu colaborador podrá ocultar/mostrar cada categoría sin tocar el archivo.
• Aprovecha el snap a rejilla. Actívalo siempre que dibujes geometría regular. Si necesitas precisión exacta (p.ej. 3.7 unidades), desactiva el snap para ese punto concreto.
• El zoom centrado en el cursor funciona como en AutoCAD: gira la rueda y el punto bajo el cursor se queda fijo. Úsalo para acercarte a una esquina sin perder el contexto.
• Cambia el color de la capa activa para que las nuevas entidades sean visualmente distintas de las existentes. Si tu plano viene en blanco y negro, prueba con cyan o magenta sobre fondo oscuro.
• Exporta a SVG si vas a imprimir o a usar el plano en la web. El SVG escala sin pixelarse y se puede abrir en Illustrator, Inkscape o un navegador.
• Exporta a DXF si vas a continuar el plano en AutoCAD, BricsCAD, LibreCAD, QCAD o FreeCAD. Es el camino de interoperabilidad más fiable.
• Guarda el proyecto como JSON antes de cerrar la pestaña. La próxima vez, abre el JSON con el botón Abrir y recuperas capas, entidades y estilos.

Limitaciones y consideraciones

Esta herramienta es un visor y editor 2D de bolsillo, no un reemplazo completo de AutoCAD. Concretamente, no soporta: entidades 3D (sólo 2D), superficies y mallados, sólidos, splines complejos, referencias externas (XREF), tablas de bloques con atributos dinámicos, constraints paramétricos, hatching con patrones personalizados, y las versiones DWG R2020+. Para esos casos, necesitas un cliente de escritorio (AutoCAD, BricsCAD, FreeCAD…).

Tampoco incluye impresión en el sentido clásico CAD (con escala, cajetín, márgenes normalizados): si quieres imprimir el plano, expórtalo a PDF desde otro programa o usa la función de imprimir del navegador sobre el SVG exportado. Para mediciones precisas, la rejilla sirve de referencia visual pero no sustituye a las cotas reales del archivo.

El parser DWG cubre las versiones R12 a R2018 con las entidades 2D más comunes cuando el archivo contiene un bloque DXF embebido o una versión detectable. Si abres un archivo con entidades no reconocidas, verás un aviso en la barra de estado con el número de entidades omitidas. Si el archivo tiene errores de codificación (común en DWG de programas no-AutoCAD), el parser intentará continuar y te avisará de los trozos que no pudo leer. Si tu DWG no se abre, la solución estándar de la industria es exportarlo a DXF desde AutoCAD, BricsCAD, LibreCAD, QCAD o FreeCAD — todos soportan exportación nativa a DXF y ese flujo es 100% interoperable.

Glosario

DWG

Formato binario propietario de AutoCAD para guardar planos. Nativo, compacto, con versiones que cambian cada 2-3 años.

DXF

Formato de texto plano definido por Autodesk para intercambiar planos entre programas CAD. Más fácil de parsear y muy interoperable.

Entidad

Cualquier elemento dibujado en un plano: una línea, un círculo, un texto, una polilínea, etc. Cada entidad tiene tipo, color, grosor y capa.

Capa (layer)

Agrupación lógica de entidades. Permite ocultar, mostrar y editar grupos completos de un plano (paredes, cotas, muebles, anotaciones).

Rejilla (grid)

Patrón visual de líneas equiespaciadas que sirve de referencia para dibujar con medidas regulares. El paso se puede cambiar (5, 10, 20, 50, 100 unidades).

Snap

Ajuste automático del cursor a la rejilla u otros puntos de referencia para dibujar con precisión sin tener que apuntar exactamente.

Mundo vs. pantalla

Sistema de coordenadas del archivo (mundo, en metros o milímetros) frente al sistema de coordenadas del canvas (pantalla, en píxeles). La matriz de transformación pasa de uno a otro.

WCS

World Coordinate System, el sistema de coordenadas del archivo. El origen (0,0) lo define el autor del plano.

Versión (DWG/DXF)

Edición del formato, asociada al año de salida de AutoCAD. R12 (1992), R14 (1997), R2000 (1999), R2004 (2003), R2007 (2006), R2010 (2009), R2013 (2012), R2018 (2017), R2020+.

Polilínea

Entidad formada por uno o varios segmentos conectados (rectos o curvos), tratados como un único objeto editable.