Видео недоступно для предпросмотра
Смотреть в Telegram
Как мы делали карандаш
Создание удобного инструмента карандаша довольно сложная задача, хотя на первый взгляд это может выглядеть не так. При этом, когда задача сделать так, чтобы пользователи чувствовали, словно рисуют на настоящей бумаге — приходится писать свой движок рендера.
Сердцем нашего карандаша стала сложная система рендеринга. Мы использовали Canvas API для молниеносного отображения линий, но столкнулись с проблемой: как сделать линии плавными и естественными, не перегружая при этом браузер? Решение пришло в виде "умной" обработки точек.
Представьте, что вы быстро рисуете извилистую линию. Ваша рука слегка дрожит, создавая тысячи микроточек. Мы применили алгоритм Дугласа-Пекера, который работает как опытный художник: он "схватывает" главные изгибы, игнорируя мелкое дрожание. Это не только ускорило работу, но и сделало линии более четкими.
Но мы пошли дальше. Взяв эти ключевые точки, мы соединили их кривыми Безье. Это похоже на натягивание резинки между гвоздиками: линия становится идеально гладкой, сохраняя при этом задуманную форму. Результат? Линии, теперь выглядят так, будто их нарисовал профессиональный художник.
Мы долго экспериментировали с "ощущением" карандаша. Добавили небольшой круг, показывающий размер кисти, который следует за курсором. Это как видеть кончик настоящего карандаша перед тем, как начать рисовать. Пользователи оценили эту деталь — она позволяет точно понять, какой будет линия, ещё до начала рисования.
Особое внимание мы уделили персонализации. Мы создали систему, которая запоминает любимые настройки пользователя: толщину линии, цвет, стиль. Используя localStorage, мы сделали так, что карандаш "помнит" предпочтения даже после закрытия браузера. Можно больше не задумываться о настройке карандаша перед тем как начать рисовать.
P.S. Сейчас мы работаем над добавлением маркера для выделения текста и ластика. Скоро станет еще удобнее выделять важные места в документах или исправлять ошибки.
Создание удобного инструмента карандаша довольно сложная задача, хотя на первый взгляд это может выглядеть не так. При этом, когда задача сделать так, чтобы пользователи чувствовали, словно рисуют на настоящей бумаге — приходится писать свой движок рендера.
Сердцем нашего карандаша стала сложная система рендеринга. Мы использовали Canvas API для молниеносного отображения линий, но столкнулись с проблемой: как сделать линии плавными и естественными, не перегружая при этом браузер? Решение пришло в виде "умной" обработки точек.
Представьте, что вы быстро рисуете извилистую линию. Ваша рука слегка дрожит, создавая тысячи микроточек. Мы применили алгоритм Дугласа-Пекера, который работает как опытный художник: он "схватывает" главные изгибы, игнорируя мелкое дрожание. Это не только ускорило работу, но и сделало линии более четкими.
Но мы пошли дальше. Взяв эти ключевые точки, мы соединили их кривыми Безье. Это похоже на натягивание резинки между гвоздиками: линия становится идеально гладкой, сохраняя при этом задуманную форму. Результат? Линии, теперь выглядят так, будто их нарисовал профессиональный художник.
Мы долго экспериментировали с "ощущением" карандаша. Добавили небольшой круг, показывающий размер кисти, который следует за курсором. Это как видеть кончик настоящего карандаша перед тем, как начать рисовать. Пользователи оценили эту деталь — она позволяет точно понять, какой будет линия, ещё до начала рисования.
Особое внимание мы уделили персонализации. Мы создали систему, которая запоминает любимые настройки пользователя: толщину линии, цвет, стиль. Используя localStorage, мы сделали так, что карандаш "помнит" предпочтения даже после закрытия браузера. Можно больше не задумываться о настройке карандаша перед тем как начать рисовать.
P.S. Сейчас мы работаем над добавлением маркера для выделения текста и ластика. Скоро станет еще удобнее выделять важные места в документах или исправлять ошибки.