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