Сохранение и восстановление холста

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

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

• Исследуйте исходные команды (с аргументами), которые создают обтравочные контуры.

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

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

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

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

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

рамки для выполнения этих задач может включать в себя создание PathObject «класс».

Этот новый PathObject класс должен быть в состоянии:

• Принимает & магазин повелевает оригинальный путь вырезка (и аргументы).

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

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

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

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

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

свойства:

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

Методы:

• 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;