Сначала я просто хотел написать простую доску для рисования. Позже я неосознанно вспомнил, что графитовые документы имеют функцию доски, поэтому мне захотелось превратить текущую функцию холста в упрощенную версию доски для совместного рисования.
Онлайн-демо: в настоящее время находится в процессе развертывания, его необходимо клонировать для локального запуска.
git-адрес
2. Бегите
git clone <repository>npm install#>>>Для стадии разработки: #Запуск внешней службы (с использованием сервера разработки Webpack): npm run dev#Запуск внутренней службы (nodemon используется для мониторинга изменений внутренних файлов в режиме реального времени) и перезапустите службу) npm run start# >>>Для производственного этапа: #Упакуйте файлы внешнего интерфейса, а затем запустите сервер 1. npm run build2.
3. Функция:
Разработка завершена:
• Масштабирование холста (готово)
• Цвет холста (готово)
• Цвет кисти (готово)
• Толщина кисти (готово)
• История (отменить, восстановить) (Готово)
• Чат (готово)
• Совместная работа над рисованием (аналогично совместной работе с графическими документами) (Готово)
Возможности, которые предстоит разработать:•Украшение интерфейса пользовательского интерфейса (в разработке). •Планирование использования библиотеки пользовательского интерфейса (материальный дизайн).
• Текстовый контроль (в разработке)
•Загружайте картинки и рисуйте по картинкам (в разработке)
•Основную форму рисунка можно перетаскивать, чтобы отрегулировать размер (подлежит разработке)
• Богатые функции чата (выражения, изображения, аудио и видео) (в разработке) • WebRTC получает данные видеопотока и передает их
•Другие неизвестные функции (x)
4. Рисунок эффекта
5. Послесловие
Реализация этого приложения относительно проста, и есть еще много возможностей для улучшения.
Вышеупомянутая функция общей доски для рисования, реализованная в Socket.io и Canvas, представленная редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя!