Обрезка холста Сохранить и восстановить

Question

У нас есть холст, который использует 5 областей отсечения (для вида спереди и сзади). Нам нужно сохранить весь холст в сеансе и восстановить его, когда пользователь вернется на страницу. Пока что мы не нашли способ сохранить состояние клипа и восстановить его. Ждем отзывов.

Answer 1

Вот схема того, как сохранить и восстановить области отсечения на холсте html.

Начните с этой схемы и напишите новый вопрос, если у вас возникнут проблемы с кодированием.

Обрезка холста HTML включает в себя:

• Выполнение команд пути, которые определяют путь отсечения.

• Делать клип с context.clip()

• Если требуется более одного клипа, вы должны обернуть каждый клип внутри context.save а также context.restore пара.

• Связанные с преобразованием команды, которые могут быть использованы для создания клипов: save, setTransform, transform, translate, rotate, scale, restore

• Команды рисования пути, которые могут быть использованы для создания клипов: beginPath, moveTo, arc, quadraticCurveTo, bezierCurveTo, lineTo, rect, arcTo, closePath

• И команда, которая вызывает отсечение: clip

Для сохранения и восстановления клипов необходимо сохранить, а затем повторно выполнить все контекстные команды, связанные с путем отсечения (и их аргументы).

• Выполните оригинальные команды (с аргументами), которые создают пути отсечения.

• Сохраните эти команды (и аргументы) в формате, который можно сериализовать и сохранить.

• Вам решать, какой формат использовать для хранения команд. JSON - это распространенный формат, используемый для сохранения массивов JavaScript (например, команд и аргументов). Вы можете легко конвертировать JavaScript-массивы и объекты в строку, используя JSON.stringify,

• Вам решать, где будут храниться сериализованные команды. Общие места для хранения сериализованных команд: база данных, localStorage, состояние сеанса и т. Д.

• Позже, когда пользователь переходит обратно на страницу, вы должны извлечь сохраненный JSON и "перегидрировать" команды (и аргументы), используя JSON.parse,

• Выполните сохраненные команды обтравочного контура (и аргументы) и вызовите context.clip() воссоздать ту же вырезку, что и изначально.

Рамки для этих задач могут включать создание PathObject "учебный класс".

Это новый PathObject класс должен уметь:

• Принимает и сохраняет все оригинальные команды обтравочного контура (и аргументы).

• Воспроизвести (повторно выполнить) сохраненные команды отсечения в контексте.

• Сериализуйте свои сохраненные команды в JSON.

• Примите строку JSON (содержащую сериализованные команды и аргументы) и восстановите состояние PathObject.

• Еще раз введите команды обтравочного контура, необходимые для воссоздания тех же клипов, которые были изначально созданы.

PathObject может содержать эти свойства и методы:

Свойства:

• команды [], arguments[], где каждая последовательно спаренная команда и аргумент являются одним шагом в создании обтравочного контура (см. выше, какие команды, связанные с путем, вы должны записать).

Методы:

• PathObject метод (функция), соответствующий каждой из команд пути. Каждая функция просто принимает аргументы, связанные с этой командой, и делает commands.push а также arguments.push для каждого из принятых аргументов.

  // when myPathObject.moveTo(x,y) is called...
  
  // store moveTo in the commands array
  commands.push('moveTo');
  
  // store x,y (as an array) into the arguments array
  arguments.push([x,y]);
  

• Метод для выполнения всех сохраненных команд пути в контексте.

  for(var i=0;i<commands.length;i++){
      context[commands[i]].apply(context, args[i]);            
  }
  

• Метод сериализации накопленных команд в строку JSON с использованием

  var commandsAndArgs={
      commands:commands,
      args:args
  }
  return(JSON.stringify(commandsAndArgs));
  

• Метод десериализации строки JSON с использованием

  var j=JSON.parse(json);
  this.commands=j.commands;
  this.args=j.args;