Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: undo, redo, canvas

Какие сложности возникают при реализации Undo/Redo для Canvas-сцен?

Вопрос нужен, чтобы оценить, понимает ли кандидат, почему Undo/Redo для Canvas сложнее, чем для обычного UI-состояния.

Короткий ответ

Canvas не хранит состояние объектов, поэтому его нельзя «откатить» автоматически. Для Undo/Redo нужно самостоятельно сохранять историю изменений. Основные сложности связаны с объёмом данных, производительностью и корректным восстановлением сцены. Часто приходится выбирать между хранением снимков состояния и хранением операций.

Длинный ответ

Canvas — императивный API, и после отрисовки он не знает, какие объекты и действия к ней привели. Это напрямую влияет на реализацию Undo/Redo.

Ключевые сложности

Перед реализацией важно понимать основные проблемы:

  1. Отсутствие встроенного состояния

    • Canvas не знает про фигуры и слои

    • Всё состояние нужно хранить отдельно

  2. Объём данных

    • Полные снапшоты сцены могут быть большими

    • Частые изменения быстро раздувают историю

  3. Производительность

    • Восстановление состояния может требовать полной перерисовки

    • Это особенно критично для сложных сцен

Основные подходы

  1. Хранение снимков состояния

    • сериализация всех объектов

    • простой откат

    • большой расход памяти

  2. Хранение команд

    • сохраняются действия (add, move, resize)

    • меньше памяти

    • сложнее реализовать

Типичный поток Undo/Redo

  • действие → запись в историю

  • Undo → откат состояния

  • Redo → повтор действия

Краткий вывод

Undo/Redo для Canvas — это задача управления историей состояния сцены. Выбор между снапшотами и командами зависит от сложности сцены и требований к производительности.

Уровень

  • Рейтинг:

    4

  • Сложность:

    7

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#undo

#redo

#canvas

Подпишись на React Developer в телеграм