Использование JavaScript/HTML5/Canvas Drag & Drop Дизайн макета пола в Интернете

В настоящее время я работаю над разработкой приложения на основе ASP.NET MVC, которое позволяет пользователям иметь холст для перетаскивания изображений пола и комнаты (например, диванов, телевизоров, кроватей, столов и т. д.). По сути, я хочу создать что-то вроде draw.io, но дать пользователю возможность создать такой конечный продукт:

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%26export%3Ddownload

Ищу лучшую библиотеку для рисования. Существует так много библиотек JavaScript, но я не совсем уверен, какая из них наиболее предпочтительна (самая простая) для такой задачи.

В идеале на левой панели должны быть разные svg, которые пользователь может перетаскивать на какой-либо холст (например, диваны, телевизор, кровать, столы и т. д.). Затем они могут соединить их друг с другом и т. д. Мне действительно нужен совет по соответствующей библиотеке для создания такого инструмента!

Вам также требуется иметь возможность определять планировку комнаты (она может быть не прямоугольной)? Его размеры? Соединить несколько комнат вместе?
Я не совсем понял: вы ищете полностью автономное приложение для рисования и экспорта в формате SVG, или вы ищете библиотеку для добавления в свое собственное приложение?

Ответы (1)

Вы можете проверить библиотеку диаграмм Syncfusion ASP.NET MVC , ее можно легко интегрировать с приложением MVC. Пользовательские формы и коннекторы также можно определить с помощью SVG или JavaScript.

Пример https://ej2.syncfusion.com/aspnetmvc/Diagram/DefaultFunctionalities#/material

Кажется, есть выбор между FlowChart, MinMap и Org Chart.
ой, перепутала ссылку. Фактически, данный пример представляет собой демонстрационное приложение, построенное с использованием библиотеки диаграмм синхронизации. Но основная библиотека поддерживает несколько типов. Я отредактирую пример ссылки
Кажется, это блок-схема. Это совсем не похоже на образец плана этажа OP, и я не вижу никакого способа грустить «, телевизор, кровать, столы и т. Д.». Кроме того, хотя он не дает полной ясности, мне кажется, что ему нужно не отдельное приложение, а что-то, что он может добавить в свое собственное приложение .NET. Надеюсь, он разъяснит (если он когда-нибудь снова войдет в систему).
Я создал простой образец плана этажа здесь . Надеюсь, поможет
Я надеюсь на это, но, увы, ОП не входил в систему в течение пяти месяцев, вскоре после того, как он присоединился и опубликовал этот вопрос. Я проголосовал за вас как можно больше за ваш вклад. Надеюсь, он вернется однажды и примет ответ. Добро пожаловать на борт :-)