No início, eu só queria escrever uma prancheta simples. Mais tarde, lembrei-me inconscientemente que os documentos de grafite têm uma função de quadro branco, então quis desenvolver a função de tela atual em uma versão simplificada da prancheta colaborativa.
Demonstração online: Atualmente em processo de implantação, ela precisa ser clonada para ser executada localmente.
endereço git
2. Corra
git clone <repositório>npm install#>>>>Para o estágio de desenvolvimento: #Inicialização do serviço front-end (usando o servidor webpack dev): npm run dev#Inicialização do serviço backend (o nodemon é usado para monitorar modificações de arquivos back-end em tempo real tempo e reinicie o serviço) npm run start# >>>Para o estágio de produção: #Empacote os arquivos front-end e, em seguida, inicie o servidor 1. npm run build2.
3. Função:
Desenvolvimento concluído:
• Zoom na tela (concluído)
•Cor da tela (concluído)
•Cor do pincel (concluído)
• Espessura do pincel (Concluído)
•Histórico (desfazer, restaurar) (Concluído)
•Sala de bate-papo(Concluído)
• Colaboração em desenho (semelhante à colaboração em documentos de grafite) (Concluído)
Funcionalidades a desenvolver:• Embelezamento da interface UI (a ser desenvolvido) • Planejando o uso da biblioteca UI (design de material)
•Controle de texto (a ser desenvolvido)
• Faça upload de fotos e desenhe com base em fotos (a serem reveladas)
•A forma básica do desenho pode ser arrastada para ajustar o tamanho (a ser desenvolvido)
• Funções avançadas de chat (expressões, imagens, áudio e vídeo) (a serem desenvolvidas) • webRTC obtém dados de fluxo de vídeo e os transmite
•Outras funções desconhecidas (x)
4. Desenho de efeito
5. Posfácio
A implementação desta aplicação é relativamente básica e ainda há muito espaço para melhorias.
O texto acima é a função de prancheta compartilhada implementada por socket.io e canvas introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo.