처음에는 그냥 간단한 화판을 쓰고 싶었는데, 나중에는 흑연문서에 화이트보드 기능이 있다는 걸 무의식적으로 떠올려 현재의 캔버스 기능을 협업 화판의 단순화된 버전으로 발전시키고 싶었습니다.
온라인 데모: 현재 배포 과정에서 로컬로 실행하려면 복제해야 합니다.
자식 주소
2. 실행
git clone <repository>npm install#>>>개발 단계: #프런트엔드 서비스 시작(webpack 개발 서버 사용): npm run dev#백엔드 서비스 시작(nodemon은 백엔드 파일 수정을 실시간으로 모니터링하는 데 사용됩니다. 서비스를 다시 시작하세요) npm run start# >>>프로덕션 단계의 경우: #프론트엔드 파일을 패키징한 다음 서버를 시작합니다. 1. npm run build2.
3. 기능:
개발 완료:
•캔버스 줌(완료)
•캔버스 색상 (완료)
•브러시 색상(완료)
•브러시 굵기 (완료)
•기록(실행 취소, 복원)(완료)
•채팅방(완료)
• 그리기 협업 (그라파이트 문서 협업과 유사) (완료)
개발할 기능:•UI 인터페이스 미화(개발 예정) •UI 라이브러리 활용 예정(머티리얼 디자인)
•텍스트 컨트롤(개발 예정)
•그림을 업로드하고 그림을 기반으로 그림 그리기(개발 예정)
•도면의 기본 형태를 드래그하여 크기 조절 가능 (개발 예정)
• 풍부한 채팅 기능(표정, 사진, 오디오, 비디오)(개발 예정) • webRTC는 비디오 스트림 데이터를 획득하여 전송합니다.
•기타 알 수 없는 기능(x)
4. 효과 그리기
5. 이후
이 애플리케이션의 구현은 비교적 기본적이며 아직 개선의 여지가 많습니다.
위 내용은 에디터가 소개한 Socket.io와 Canvas의 공유 드로잉 보드 기능입니다. 궁금하신 점은 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다!