Как вы заметили, уже несколько месяцев на канале почти не выходили оригинальные посты. Но это не значит, что я ничего не делал. Как раз наоборот — я работал над несколькими проектами, о которых пока нечего было рассказать 🙁
Но теперь я наконец готов поделиться одним из них.
В качестве учебного проекта мы с одногруппником разрабатываем онлайн-доску для рисования и записей. Что это такое?
🔹 Как эппл заметки, но с многопользовательским режимом
🔹 Как гугл документы, но для рисования
🔹 Как microsoft teams whiteboard, но нормально работающая 🙃
Ну вы поняли.
Фронтенд (в виде веб-приложения) написан на Svelte, отрисовка работает на canvas'е, общение с сервером реализовано через
socket.io.
🔹 Почему Svelte? Решил попробовать. Это реактивный фреймворк со всеми вытекающими плюсами, но без клиентской зависимости (не нужно загружать весь код фреймворка на всех страничках, потому что нужные кусочки уже встроены в бандл во время сборки)
🔹 Почему на canvas'e? На первый взгляд показалось оптимальнее. потом, может быть, стоит попробовать svg.
🔹 Почему
socket.io? Так проще всего.
Бэкенд написан на питоне. Flask,
socket.io, sqlite, всё такое.
Так вот, что у нас есть (и работает)?
🔹 Сама рисовалка.
🔹 Изменение цвета и толщины линии
🔹 Поддержка десктопа + мобильных устройств. Рисование мышкой, пальцем, стилусом.
🔹 Разная толщина линии в зависимости от силы нажатия (например, с Apple Pencil). Правда, соответствующий рендерер пока экспериментальный и выглядит не очень.
🔹 Pan&Zoom, в частности, двумя пальцами на тач-устройствах. Это было сложно, но интересно 🙃
🔹 Синхронизация записей между несколькими клиентами
🔹 Создание нескольких досок с уникальными id.
Ну вот, можно сказать, и всё. Приложение нисколечки не production-ready, но уже довольно неплохо работает. Пишите в комментарии, расскажу еще что-нибудь.
А вот мини-демонстрация работы:
