Verwendung von JavaScript/HTML5/Canvas Drag & Drop Floor Layout Design im Web

Ich arbeite derzeit an der Entwicklung einer ASP.NET MVC-basierten Anwendung, die es Benutzern ermöglicht, eine Leinwand zum Ziehen und Ablegen von boden- und raumbasierten Bildern (z. B. Sofas, Fernseher, Bett, Tische usw.) zu haben. Im Wesentlichen möchte ich so etwas wie draw.io erstellen, aber dem Benutzer ermöglichen, ein Endprodukt wie dieses zu entwickeln:

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

Ich suche nach der besten Bibliothek, um die Zeichnung auszuführen. Es gibt so viele JavaScript-Bibliotheken, aber ich bin mir nicht sicher, welche für eine solche Aufgabe am meisten bevorzugt (am einfachsten) ist.

Idealerweise hätte der linke Bereich verschiedene SVGs, die der Benutzer auf eine Leinwand ziehen kann (z. B. Sofas, Fernseher, Bett, Tische usw.). Dann können sie sie miteinander verbinden usw. Die geeignete Bibliothek zum Erstellen eines solchen Tools ist das, wozu ich wirklich Rat brauche!

Müssen Sie auch die Raumaufteilung definieren können (es darf nicht rechteckig sein)? Seine Abmessungen? Mehrere Räume miteinander verbinden?
Ich bin hier nicht ganz klar – suchen Sie nach einer völlig eigenständigen App zum Zeichnen und Exportieren als SVG, oder suchen Sie nach einer Bibliothek, die Sie Ihrer eigenen App hinzufügen können?

Antworten (1)

Sie können die Syncfusion ASP.NET MVC-Diagrammbibliothek überprüfen , sie kann einfach in eine MVC-Anwendung integriert werden. Benutzerdefinierte Formen und Verbinder können auch mit SVG oder JavaScript definiert werden.

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

Scheint eine Wahl zwischen FlowChart, MinMap & Organigramm zu geben.
Oh, ich habe den Link vermasselt. Tatsächlich handelt es sich bei dem angegebenen Beispiel um eine Vorzeigeanwendung, die mithilfe der Syncfusion-Diagrammbibliothek erstellt wurde. Die Kernbibliothek unterstützt jedoch mehrere Typen. Ich werde den Beispiellink bearbeiten
Das scheint ein Flussdiagramm zu sein. Es sieht nicht wie der Beispielgrundriss des OP aus, und ich sehe keinen Weg zu traurigem ", Fernseher, Bett, Tischen usw". Auch wenn er es nicht ganz deutlich macht, scheint es mir, dass er keine eigenständige Anwendung will, sondern etwas, das er in seine eigene .NET-App einfügen kann. Hoffentlich klärt er auf (falls er sich jemals wieder anmeldet).
Ich habe hier ein einfaches Muster für den Grundriss erstellt . Ich hoffe es hilft
Ich hoffe es, aber leider hat sich das OP fünf Monate lang nicht angemeldet, kurz nachdem er beigetreten ist und diese Frage gestellt hat. Ich habe Sie so weit wie möglich für Ihren Beitrag positiv bewertet. Hoffentlich kommt er eines Tages zurück und akzeptiert die Antwort. Willkommen an Bord :-)
Verwendung von JavaScript/HTML5/Canvas Drag & Drop Floor Layout Design im Web
AntwortenHierDatenschutz-Bestimmungen1y, 0v