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