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并且＆＃34;重新水合＆＃34;使用JSON.parse的命令（和参数）。
执行保存的剪切路径命令（和参数）并调用context.clip()以重新创建与原先相同的剪辑。

这些任务的框架可能涉及创建PathObject＆＃34;类＆＃34;。

这个新的PathObject类应该能够：

接受＆amp;存储所有原始剪切路径命令（和参数）。
在上下文中播放（重新执行）存储的剪辑命令。
将其存储的命令序列化为JSON。
接受JSON字符串（包含序列化命令和参数）并恢复PathObject的状态。
重新发出重新创建最初创建的相同剪辑所需的剪切路径命令。

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

属性：的

命令[]，arguments []与每个顺序配对的命令＆amp;参数是创建剪切路径的一个步骤（参见上面的必须记录的路径相关命令）。

方法：

与每个路径命令对应的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;

画布剪辑保存和还原

1 个答案: