Реализация Whiteboard (совместная доска) в мобильном приложении
Совместная доска — бесконечный холст с объектами: линии, фигуры, стикеры, изображения, текст. Несколько пользователей рисуют одновременно, видят действия друг друга в реальном времени. На мобиле добавляется: пальцевый ввод, pinch-to-zoom, Apple Pencil / Stylus с pressure sensitivity.
Самая сложная часть здесь — не сетевой уровень, а рендеринг холста и обработка жестов под нагрузкой.
Архитектура данных: объектная модель холста
Каждый объект на доске — это документ в distributed state. Хорошо подходит Y.Map где ключ — UUID объекта, значение — его свойства (тип, координаты, размер, цвет, z-index). Для составных объектов (путь из точек) — Y.Array точек внутри объекта.
const yobjects = ydoc.getMap('objects');
// Добавляем стрелку
yobjects.set(uuid(), {
type: 'arrow',
x1: 100, y1: 200,
x2: 400, y2: 350,
strokeColor: '#1a1a2e',
strokeWidth: 2
});
Конкурентное перемещение одного объекта двумя пользователями: Last-Write-Wins — приемлемо для координат. Конкурентное удаление объекта одним и изменение другим — стандартная проблема CRDT: операция изменения применяется к уже удалённому объекту и теряется. Нужна tombstone-логика или временное хранение «призрачных» объектов.
Рисование кистью: стриминг точек
Свободное рисование (freehand) генерирует 60–120 точек в секунду (на 60Hz дисплее). Отправлять каждую точку через WebSocket — избыточно. Оптимизация:
- Буферизация — отправляем batch точек каждые 50ms.
- Алгоритм упрощения — Douglas-Peucker или Ramer-Douglas-Peucker убирает избыточные точки с configurable epsilon. Кривая из 500 точек сжимается до 30–50 без видимой потери качества.
-
Stroke prediction — на iOS с Apple Pencil
UITouch.predictedTouchesпредсказывают следующие точки до их фактического попадания, снижая воспринимаемую задержку.
Stroke как CRDT-объект: начинаем с временного Y.Array точек в Awareness (не в документе — не нужна полная история каждой точки). При завершении (touchEnd / pointerUp) — фиксируем упрощённый путь в документ как единый объект.
Canvas рендеринг на мобиле
React Native: react-native-skia (Skia graphics engine) — лучший вариант для производительного 2D-рендеринга. @shopify/react-native-skia поддерживает Path, Paint, Text, Image. Рендер на GPU через RN's new architecture. react-native-svg — проще, но медленнее для анимированных объектов.
Flutter: CustomPainter с Canvas API — нативный путь. flutter_drawing_board — готовый пакет с базовыми инструментами. Для production: кастомный CustomPainter с dirty-region optimization (перерисовываем только изменившийся регион через Canvas.clipRect).
iOS Native: Metal + MetalKit для максимальной производительности, UIBezierPath + CALayer для среднего уровня сложности. Apple PencilKit — готовый компонент с поддержкой Pencil, но ограниченная кастомизация.
Android Native: Canvas API с Path для простых случаев, OpenGL ES / Vulkan через GLSurfaceView для сложных.
Виртуализация бесконечного холста
При 1000+ объектах рендеринг всего холста в каждом кадре — проблема. Нужен spatial index (R-tree или простой grid-based) для определения объектов в текущем viewport. Рендерим только видимые объекты + небольшой буфер за краями viewport.
rbush — JavaScript R-tree библиотека, работает в React Native. При panZoom определяем новый viewport, запрашиваем объекты в этом bounding box, рендерим только их.
Синхронизация: что отправлять и когда
Cursor/viewport awareness (позиция пользователя на холсте) — через Y.js Awareness, не в документ, 10fps достаточно.
Объекты в процессе создания — два режима:
- Временный preview через Awareness (другие видят незафиксированный объект).
- Только финальный объект после
touchEnd(проще, но нет real-time preview рисования).
Первый режим даёт лучший UX, второй — меньше трафика и сложности.
Оценка
Базовый whiteboard (фигуры, текст, стрелки, синхронизация) на Flutter или React Native — 10–16 недель. С рисованием кистью, pressure sensitivity, умным упрощением путей и виртуализацией большого холста — 20–32 недели.