Помните, как в детстве мы вырезали картинки из журналов и клеили их на ватман? Так вот, недавно я поймал себя на мысли, что наш Microboard - это тот же ватман, только на стероидах. И знаете что? Мы сделали его еще круче.
Теперь вы можете выгружать всю доску в виде одной картинки. Звучит просто, но за этой “простотой“ кроется мощный инструмент для творчества и продуктивности.
Как это работает технически? Мы используем рендеринг на Canvas для создания изображения всей доски, которое скейлим до 4 000 пикселей. Процесс оптимизирован так, что даже огромные доски с сотнями элементов конвертируются за считанные секунды. Пока только в формате .png.
Но давайте о главном - как это меняет рабочий процесс:
1. Презентации на новом уровне. Забудьте о скучных слайдах. Теперь вы можете показать весь мыслительный процесс на одном изображении.
2. Удаленная работа без боли. Отправьте коллегам картинку доски, и они мгновенно войдут в контекст, даже без доступа к Microboard.
3. Документация проектов. Один снимок доски расскажет больше, чем 100 страниц текста.
4. Творческий брейншторминг. Распечатайте доску и работайте с ней офлайн. Да-да, иногда старые методы новые технологии = магия.
Когда мы начали разрабатывать инструмент для экспорта части доски, мы не подозревали, какие вызовы нас ждут. Цель была ясна: дать пользователям возможность выбрать область и экспортировать её как изображение. Но простая идея быстро превратилась в сложную задачу.
Первым делом нужно было создать интерфейс выбора области. Мы выбрали прямоугольник, который можно перемещать и изменять в размере. Добавили возможность изменения размера прямоугольника, позволяя пользователям тянуть за углы. Для этого пришлось следить за позицией мыши и написать алгоритм поиска углов.
Для каждого угла добавили декоративные элементы, чтобы сделать интерфейс более понятным. И если для обычного сайта добавить обводку в углы компонента занимает 5 строк, то наш алгоритм потребовал около 100.
Сам экспорт был не таким сложным: настроить позицию камеры, чтобы захватить нужный участок, отрендерить каждый элемент внутри выбранной области и преобразовать canvas в картинку.
И вот, у нас готов мощный и интуитивно понятный инструмент для экспорта досок. Под капотом сложная логика, но для пользователя всё просто и естественно.
3 views
7368
3376
2 days ago 00:29:01 1
Старые фото лапотной электрической России
2 days ago 03:40:05 10
Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS. Часть 1
3 days ago 01:55:02 9
. НЕЙРОСЕТИ В МАРКЕТПЛЕЙСАХ. Товары с ИИ. Продажная курилка. Маркетинг, эксперты, обучение.
3 days ago 03:13:22 4
Аналог COZE - ProTalk ИИ-Чат-боты Обзор создания сервиса для нейро-бизнеса. Продажная курилка
4 days ago 00:36:18 3
Презентация «Mindbox 2.0»: Иван Боровиков рассказывает о ключевых изменениях в платформе
6 days ago 00:00:14 6
Экспорт изображения доски
1 week ago 00:02:38 1
3D-движок UNIGINE : важное в релизе
2 weeks ago 02:10:03 1
- Полный разбор функционала от А до Я
2 weeks ago 00:10:30 2
Результаты поиска и работа с документами в программе NormaCS 4.0
2 weeks ago 00:13:44 18
Мастер-класс. Разметка датасета в CVAT
3 weeks ago 00:28:11 3
Бесплатный курс по Тильда с нуля. Перенос макета из Figma в Tilda. 1 урок (1 часть)
3 weeks ago 00:00:42 148
Весь мир в словах и фотографиях
3 weeks ago 00:25:06 4
Photoshop. Экспорт изображений
3 weeks ago 00:26:15 10
Pixso. Экспорт изображений
3 weeks ago 00:17:25 53
Figma. Экспорт графики в figma
3 weeks ago 01:23:31 1
HTML Верстка корзины товаров HTML, SCSS, BEM naming
4 weeks ago 00:12:36 2
Уроки Python / Экспорт Canvas в JPG, PNG (tkinter)
4 weeks ago 00:03:28 295
Можно сохранить из Телеграм свои сообщения, видео, фото, файлы на компьютер
4 weeks ago 00:01:26 11
Автоматическая вставка подписи и печати в Бизнес паке
4 weeks ago 00:09:27 89
Х10 ОЧЕНЬ БЫСТРО!!! Как ускорить Премьер_про / Как ускорить монтаж видео
4 weeks ago 00:26:38 67
ЭТО ЛЕГКО! Мультикамерный монтаж в Premiere Pro / Монтаж видео в Премьер Про
4 weeks ago 00:21:08 2
Лучшая нейросеть для дизайнера — бесплатная генерация картинок, иконок, логотипов
4 weeks ago 00:22:03 43
Dehancer Final Cut Pro X Обучение и Обзор Плагина
4 weeks ago 00:02:04 1
Как “превратить“ фото 360 в видео для загрузки в Instagram