画布剪辑保存和恢复

Question

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

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 数组（如命令和参数）的常用格式。您可以使用JSON.stringify 创建轻松地将javascript 数组和对象转换为字符串。

• 由您决定序列化命令的存储位置。存储序列化命令的常见位置是：数据库、localStorage、会话状态等。

• 稍后，当用户导航回页面时，您必须获取保存的 JSON 并使用 JSON.parse“重新水化”命令（和参数）。

• 执行保存的剪辑路径命令（和参数）并调用context.clip() 以重新创建与最初相同的剪辑。

这些任务的框架可能涉及创建PathObject“类”。

这个新的PathObject 类应该能够：

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

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

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

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

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

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

属性：

• commands[]、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;