Canvas 画布剪辑保存和恢复

我们有一个使用5个剪辑区域的画布（用于前视图和后视图）。 我们需要在会话中保存整个画布，并在用户导航回页面时将其还原。 到目前为止，我们还没有找到一种方法来保存和恢复剪辑的状态。

---

期待输入。

以下是如何在html画布上保存和恢复剪辑区域的概述。

从这个提纲开始，如果你遇到编码问题，就发布一个新的问题

Html画布剪辑包括：

• 执行定义剪裁路径的路径命令

• 使用

  context.clip（）

• 如果需要多个剪辑，则必须将每个剪辑包装在

  上下文。保存
  和
  上下文。还原
  对中
  

• 可能用于创建剪辑的变换相关命令有：

  save、setTransform、transform、translate、rotate、scale、restore

• 可用于创建剪辑的路径绘制命令有：

  beginPath、moveTo、arc、quadraticCurveTo、bezierCurveTo、lineTo、rect、arcTo、closePath

• 导致剪切的命令是：

  clip

要保存和恢复剪辑必须保存并在以后重新执行所有与剪辑路径相关的上下文命令（及其参数）

• 发出创建剪切路径的原始命令（带参数）

• 以可以序列化和存储的格式保存这些命令（和参数）

• 由您决定使用哪种格式来存储命令。JSON是用于保存javascript数组（如命令和参数）的常用格式。您可以使用

  JSON.stringify

  创建一个简单的脚本，将javascript数组和对象转换为字符串

• 由您决定将序列化命令存储在何处。存储序列化命令的常见位置有：数据库、本地存储、会话状态等

• 稍后，当用户导航回页面时，必须获取保存的JSON并使用

  JSON.parse

  对命令（和参数）进行“再水化”

• 执行保存的剪辑路径命令（和参数）并调用

  context.clip（）

  ，以重新创建与原来相同的剪辑

这些任务的框架可能涉及创建

PathObject

“类”。

这个新的

PathObject

类应该能够：

• 接受并存储所有原始剪切路径命令（和参数）

• 在上下文中播放（重新执行）存储的剪辑命令

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

• 将其存储的命令序列化为JSON

• 接受JSON字符串（包含序列化命令和参数）并恢复PathObject的状态

• 重新发出重新创建最初创建的相同剪辑所需的剪辑路径命令

PathObject可能包含以下属性和方法：

特性：

• 命令[]，参数[]，每个顺序配对的命令和参数都是创建剪切路径的单个步骤（请参见上文，了解必须记录哪些与路径相关的命令）

方法：

• 与每个path命令相对应的

  PathObject

  方法（函数）。每个函数只接受与该命令相关的参数，并对每个接受的参数执行

  命令。push

  和

  参数。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]);            
  }
  

• 使用

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

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