Я занимаюсь разработкой графического редактора холста.
Я уже запрограммировал систему отмены и восстановления, основанную на регистрации действия в массиве, например:
HistoryLog=[ [action,objectid,data].... ['move','object1',[50,50]],['rotate','object2',60]... ]
В последнее время я конвертирую весь код в ООП и оптимизирую некоторые вещи на ходу.
Мой друг предложил мне использовать функцию localalstorage в HTML5 и регистрировать весь innerHTML холста при каждом действии.
Это звучало как хорошее решение для меня, потому что это спасло бы меня от большого количества кодирования. Потому что в моем коде регистрации на основе массива я должен кодировать функции отмены-повторения для каждого действия (создание, перемещение, вращение, удаление и т. Д.)
Но в случае входа innerHTML в локальное хранилище, размер регистрируемых данных становится действительно больше. И в моем приложении мне нужно шаг за шагом реанимировать процесс редактирования после того, как пользователь закончит редактирование. Поэтому мне придется сохранять ... скажем, как 300 КБ данных в базу данных для каждого редактирования.
Кроме того, мне придется ограничить количество шагов, которые должны регистрироваться, что может привести к потере части процесса редактирования.
Стоит ли использовать ведение журнала на основе массива?
- кодирование функции отмены и повтора для каждого действия
- Небольшой размер данных (неограниченное ведение журнала)
или я должен перейти на локальное хранение?
- Большой размер данных (необходимо ограниченное ведение журнала)
- Всего одна функция отмены-повтора для переключения innerHTML
Я боюсь тратить свое время на кодирование неправильного метода.
Редактировать : Я только что предложил идею. Может быть, я должен просто войти в HTML-код измененного элемента canvas? Например, вот так:
<rect id="object1" x="391" y="128" width="50" height="50" r="0" rx="0" ry="0" fill="#0000ff" stroke="none" style="opacity: 1;" opacity="1" transform="rotate(80, 416, 153)"/>
Структура шага будет выглядеть как
{ objectID, html}