Usando JavaScript/HTML5/ Canvas Drag & Drop Floor Layout Design en la web

Actualmente estoy trabajando en el desarrollo de una aplicación basada en ASP.NET MVC que permite a los usuarios tener un lienzo para arrastrar y soltar imágenes basadas en pisos y habitaciones (por ejemplo, sofás, televisores, camas, mesas, etc.). Esencialmente, quiero construir algo como draw.io pero permitir que el usuario presente un producto final como este:

https://www.draw.io/?lightbox=&p=ex1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Floorplan.html#Uhttps%3A%2F%2Fdrive.google.com%2Fa%2Fseibert-media.net%2Fuc %3Fid%3D1as2h_1PqQBNIhRlzLDkm7s6joCD5jxBt%26exportación%3Ddescarga

Estoy buscando la mejor biblioteca para llevar a cabo el dibujo. Hay tantas bibliotecas de JavaScript, pero no estoy muy seguro de cuál es la más preferida (la más fácil) para tal tarea.

Idealmente, el panel izquierdo tendría diferentes svgs que el usuario puede arrastrar a algún lienzo (por ejemplo, sofás, televisores, camas, mesas, etc.). Luego, pueden conectarlos entre sí, etc. ¡La biblioteca adecuada para construir una herramienta de este tipo es lo que realmente necesito asesoramiento!

¿También necesita poder definir el diseño de la habitación (puede que no sea rectangular)? sus dimensiones? ¿Conectar varias habitaciones juntas?
No estoy muy claro aquí: ¿está buscando una aplicación totalmente independiente para dibujar y exportar como SVG, o está buscando una biblioteca para agregar a su propia aplicación?

Respuestas (1)

Puede consultar la biblioteca de diagramas Syncfusion ASP.NET MVC , se puede integrar fácilmente con una aplicación MVC. También se pueden definir formas y conectores personalizados mediante SVG o JavaScript.

Ejemplo https://ej2.syncfusion.com/aspnetmvc/Diagram/DefaultFunctionalities#/material

Parece dar una opción entre FlowChart, MinMap y Org Chart.
Oh, perdí el enlace. En realidad, el ejemplo dado es una aplicación de exhibición que se crea utilizando la biblioteca de diagramas de fusión sincronizada. Pero la biblioteca central admite varios tipos. Editaré el enlace de ejemplo.
Eso parece ser un diagrama de flujo. No se parece en nada al plano de planta de muestra del OP, y no veo ninguna forma de triste ", Tv, Bed, Tables, etc". Además, aunque no lo deja totalmente claro, me parece que no quiere una aplicación independiente, sino algo que pueda agregar a su propia aplicación .NET. Con suerte, lo aclarará (si alguna vez vuelve a iniciar sesión).
He creado una muestra simple para el plano de planta aquí . Espero eso ayude
Eso espero, pero, por desgracia, el OP no ha iniciado sesión durante cinco meses, poco después de que se unió y publicó esta pregunta. Te he votado tanto como puedo por tu contribución. Ojalá regrese algún día y acepte la respuesta. Bienvenido a bordo :-)
Usando JavaScript/HTML5/ Canvas Drag & Drop Floor Layout Design en la web
RespuestasAquíPolítica de privacidad1y, 0v