Zuerst wollte ich nur ein einfaches Zeichenbrett schreiben. Später fiel mir unbewusst ein, dass Graphitdokumente eine Whiteboard-Funktion haben, also wollte ich die aktuelle Canvas-Funktion zu einer vereinfachten Version des kollaborativen Zeichenbretts weiterentwickeln.
Online-Demo: Derzeit im Bereitstellungsprozess, muss es geklont werden, um lokal ausgeführt zu werden.
Git-Adresse
2. Laufen
git clone <repository>npm install#>>>Für die Entwicklungsphase: #Front-End-Dienststart (mit Webpack-Dev-Server): npm run dev#Backend-Dienststart (Nodemon wird verwendet, um Back-End-Dateiänderungen in Echtzeit zu überwachen und starten Sie den Dienst neu) npm run start# >>>Für die Produktionsphase: #Packen Sie die Front-End-Dateien und starten Sie dann den Server 1. npm run build2
3. Funktion:
Entwicklung abgeschlossen:
•Leinwandzoom (Fertig)
•Leinwandfarbe (Fertig)
•Pinselfarbe (Fertig)
•Pinselstärke (Fertig)
•Verlauf (rückgängig machen, wiederherstellen) (Fertig)
•Chatraum (Fertig)
• Zusammenarbeit zeichnen (ähnlich der Zusammenarbeit mit Graphitdokumenten) (Fertig)
Zu entwickelnde Funktionen:•Verschönerung der Benutzeroberfläche (noch entwickelt) •Planung der Verwendung einer Benutzeroberflächenbibliothek (Materialdesign)
•Textsteuerung (noch entwickelt)
•Bilder hochladen und anhand von Bildern zeichnen (noch entwickelt)
•Die Grundform der Zeichnung kann gezogen werden, um die Größe anzupassen (zu entwickeln).
• Umfangreiche Chat-Funktionen (Ausdrücke, Bilder, Audio und Video) (noch zu entwickeln) • webRTC erfasst Videostream-Daten und überträgt diese
•Andere unbekannte Funktionen (x)
4. Effektzeichnung
5. Nachworte
Die Implementierung dieser Anwendung ist relativ einfach und es gibt noch viel Raum für Verbesserungen.
Das Obige ist die vom Herausgeber eingeführte gemeinsame Zeichenbrettfunktion. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.