Software gratuito de dibujo de planos de planta en 2D

Estoy buscando algo como FlDraw , que me permita dibujar planos de planta o centros comerciales, oficinas, plantas industriales y similares.

ingrese la descripción de la imagen aquí

El problema es que quiero que las partes del plano de planta sean identificables. Es decir, incrustaré el plano de planta en una página web y cuando el usuario haga clic, quiero poder identificar la tienda, la oficina, la habitación, etc., donde hizo clic, preferiblemente usando AngularJs, pero el viejo JS funcionará en caso de apuro. .

De hecho, esta _podría_ ser una pregunta de dos partes: una para dibujar los planos de planta y, la parte más complicada, un programa para dividir la imagen en segmentos (imagínese tomar un mapa de los EE. UU. y delinear los estados) de tal manera que (Angular) JS puede determinar cuándo se hace clic en uno.

Prefiero una aplicación de Windows, pero también estoy abierto a Linux.

[Actualización] Necesito SVG, con cada habitación delineada por una ruta SVG separada

[Actualización ++] Solo quiero 2D, no 3D, y solo quiero dibujar paredes, puertas, escaleras y similares. Lo que no quiero son muchas opciones para sofás, armarios, plantas en macetas y cosas por el estilo. Esto es para centros comerciales y plantas industriales. Supongo que no me opongo a que haya algunos inodoros íconos, existen emergencias, pero puedo vivir sin ellos si es necesario.

Blanco y negro está bien. Puedo agregar colo(u)r más tarde, en el HTML, si lo quiero.

Lo más importante es que cada habitación es una ruta SVG separada, por lo que dos habitaciones contiguas realmente necesitan dos "paredes" que se toquen pero estén separadas entre ellas, no solo una sola línea. Esto es para que pueda encerrar cada habitación en una ruta SVG y detectar clics dentro de la habitación.

El mal arte ascii sigue

+--------------------++--------------------+
|                    ||                    |
|      Room 1        ||      Room 2        |     <----- like this
|                    ||                    |
|   /                ||  /                 |
+--/     ------------++-/        ----------+


+--------------------+--------------------+
|                    |                    |
|      Room 1        |      Room 2        |    <----- NOT like this
|                    |                    |
|   /                |  /                 |
+--/     ------------+-/        ----------+
Considere un mapa de imagen
Excelente idea. De hecho, codifiqué algunas cosas usando uno una vez y lo había olvidado por completo (+1). Ahora, todo lo que se necesita es un plano de planta -> aplicación de mapa de imágenes :-)
O podría ir con el lienzo HTML5 más moderno y definir cada habitación como una ruta y usarla isPointInPath()para detectar clics.

Respuestas (1)

Para responder a tus dos preguntas:

  1. Recientemente tuve que dibujar un plano de planta y usé SweetHome3D para hacerlo ( http://www.sweethome3d.com ; Windows, Mac OS X 10.4 a 10.12, Linux y Solaris; "Sweet Home 3D es una aplicación gratuita de diseño de interiores que ayuda dibujas el plano de tu casa, colocas los muebles sobre ella y visitas los resultados en 3D"). Lo encontré muy fácil de usar y ofrece diferentes formas de exportar su plan (PDF, SVG).
  2. Después de dibujar su plano de planta, puede exportarlo como SVG, dividirlo en diferentes imágenes y escalarlas según sea necesario utilizando un editor de gráficos vectoriales (Illustrator, Inkscape, ..). Después de eso, puede volver a juntar todas las imágenes usando HTML/CSS/JS/AngularJS y vincularlas a una función AngularJS que luego maneja onClick.
¡Bienvenido a bordo! Buena respuesta :-( Tenía miedo de tener que hacer eso (+1). ¿Conoce alguna forma de automatizar la división de la imagen SVG?
¡Gracias! :) No, no conozco una forma totalmente automatizada de hacerlo. Normalmente uso Adobe Illustrator para ese tipo de trabajo. Illustrator ofrece la posibilidad de arrastrar y soltar diferentes partes de un SVG en un campo de exportación donde se puede definir cómo exportar con un solo clic todas las partes soltadas (PNG, JPG, SVG, PDF). SweetHome3D crea un SVG con varios grupos de elementos. Los pisos están separados y se pueden arrastrar y soltar directamente. Las paredes están conectadas, por lo que tendría que dividirlas manualmente.
Estoy pensando en usar Inkscape y poner cada habitación en una capa separada. Visto con capas superpuestas, el plano de planta parecerá completo, con las paredes de cada habitación tocando la habitación contigua, pero aún podría exportar cada capa como una ruta de lienzo HTML5.
Software gratuito de dibujo de planos de planta en 2D
RespuestasAquíPolítica de privacidad1y, 0v