Al principio, solo quería escribir un tablero de dibujo simple. Más tarde, inconscientemente recordé que los documentos de grafito tienen una función de pizarra, por lo que quería desarrollar la función de lienzo actual en una versión simplificada del tablero de dibujo colaborativo.
Demostración en línea: actualmente en proceso de implementación, es necesario clonarla para ejecutarla localmente.
dirección git
2. correr
git clone <repository>npm install#>>>>Para la etapa de desarrollo: #Inicio del servicio front-end (usando el servidor de desarrollo webpack): npm run dev#Inicio del servicio backend (nodemon se usa para monitorear las modificaciones de archivos back-end en real tiempo y reinicie el servicio) npm run start# >>>Para la etapa de producción: #Empaquete los archivos front-end y luego inicie el servidor 1. npm run build2.
3. Función:
Desarrollo completado:
•Zoom del lienzo (Listo)
•Color del lienzo (Listo)
•Color del pincel (Listo)
•Grosor del pincel (Listo)
•Historial (deshacer, restaurar) (Listo)
• Sala de chat (Listo)
• Colaboración en dibujos (similar a la colaboración en documentos de grafito) (Listo)
Características a desarrollar:•Embellecimiento de la interfaz UI (por desarrollar) •Planificación del uso de la biblioteca UI (diseño de materiales)
•Control de texto (a desarrollar)
•Subir imágenes y dibujar basándose en imágenes (por desarrollar)
•La forma básica del dibujo se puede arrastrar para ajustar el tamaño (a desarrollar)
• Funciones de chat enriquecidas (expresiones, imágenes, audio y video) (por desarrollar) • webRTC obtiene datos de transmisión de video y los transmite
•Otras funciones desconocidas (x)
4. Dibujo de efectos
5. Epílogo
La implementación de esta aplicación es relativamente básica y todavía hay mucho margen de mejora.
Lo anterior es la función de tablero de dibujo compartido implementada por socket.io y canvas presentada por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo.