Экспорт изображения доски

Помните, как в детстве мы вырезали картинки из журналов и клеили их на ватман? Так вот, недавно я поймал себя на мысли, что наш Microboard - это тот же ватман, только на стероидах. И знаете что? Мы сделали его еще круче. Теперь вы можете выгружать всю доску в виде одной картинки. Звучит просто, но за этой “простотой“ кроется мощный инструмент для творчества и продуктивности. Как это работает технически? Мы используем рендеринг на Canvas для создания изображения всей доски, которое скейлим до 4 000 пикселей. Процесс оптимизирован так, что даже огромные доски с сотнями элементов конвертируются за считанные секунды. Пока только в формате .png. Но давайте о главном - как это меняет рабочий процесс: 1. Презентации на новом уровне. Забудьте о скучных слайдах. Теперь вы можете показать весь мыслительный процесс на одном изображении. 2. Удаленная работа без боли. Отправьте коллегам картинку доски, и они мгновенно войдут в контекст, даже без доступа к Microboard. 3. Документация проектов. Один снимок доски расскажет больше, чем 100 страниц текста. 4. Творческий брейншторминг. Распечатайте доску и работайте с ней офлайн. Да-да, иногда старые методы новые технологии = магия. Когда мы начали разрабатывать инструмент для экспорта части доски, мы не подозревали, какие вызовы нас ждут. Цель была ясна: дать пользователям возможность выбрать область и экспортировать её как изображение. Но простая идея быстро превратилась в сложную задачу. Первым делом нужно было создать интерфейс выбора области. Мы выбрали прямоугольник, который можно перемещать и изменять в размере. Добавили возможность изменения размера прямоугольника, позволяя пользователям тянуть за углы. Для этого пришлось следить за позицией мыши и написать алгоритм поиска углов. Для каждого угла добавили декоративные элементы, чтобы сделать интерфейс более понятным. И если для обычного сайта добавить обводку в углы компонента занимает 5 строк, то наш алгоритм потребовал около 100. Сам экспорт был не таким сложным: настроить позицию камеры, чтобы захватить нужный участок, отрендерить каждый элемент внутри выбранной области и преобразовать canvas в картинку. И вот, у нас готов мощный и интуитивно понятный инструмент для экспорта досок. Под капотом сложная логика, но для пользователя всё просто и естественно.