HTML5画布 - 在画布上绘制，保存上下文并稍后还原 [英] HTML5 Canvas - Draw on Canvas, Save Context and Restore it later

问题描述

要求：

现在：在画布上绘制，然后点击保存（离线存储画布状态/绘图 - 。

稍后：打开带有先前保存的绘图的画布，并继续绘制。

Now: Draw on a Canvas, and hit Save (store Canvas state/drawing offline - but NOT as image).
Later: Open up the Canvas with previously saved drawing showing, and continue to draw again.

对于绘图，我们通常使用如下代码：

For drawing we normally use code as follows:

canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
...
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
....

为了稍后恢复Canvas状态 - 导出到Image帮助。

我想将画布恢复为原始状态，以便日后继续编辑绘图。

In order to restore Canvas state later - exporting to Image does not help.
I want to restore the Canvas to it's original state to continue editing the drawing at a later date.

必须离线导出和存储Canvas上下文 - 如何？

I guess, the Canvas context has to be exported and stored offline - how?

推荐答案

代理将同时存储绘制命令和执行绘图。

由于浏览器对代理的支持是非常糟糕的（今天只有FF），你必须自己构建代理，可以使用 nosuchmethod ，或者通过在Context2D中构建一个全新的WatchedContext类。

我为这个简短的演示采用了最后一个解决方案（WatchedContext Class）：

Your best shot here is to use a Proxy that will both store the draw commands and perform the drawings.
Since the browser support for Proxy is very bad (only FF as of today), you'll have to build the Proxy yourself, either by using nosuchmethod, or by building a new brand new WatchedContext Class out of the Context2D.
I took the last solution (WatchedContext Class) for this short demo :

function WatchedContext(hostedCtx) {
  this.commands= [];
  Context2dPrototype = CanvasRenderingContext2D.prototype;
  for (var p in Context2dPrototype ) {
    this[p] = function(methodName) {
        return function() {
            this.commands.push(methodName, arguments);
            return Context2dPrototype[methodName].apply(hostedCtx, arguments);
        }      
    }(p);
  }  
  this.replay=function() {
    for (var i=0; i<this.commands.length; i+=2) {
      var com = this.commands[i];
      var args = this.commands[i+1];
      Context2dPrototype[com].apply(hostedCtx, args);
    }
  }
}

显然你可能需要一些其他方法（开始/停止记录，清除...）

Obviously you might need some other method (start/stop recording, clear, ...)

只是一个小例子：

var cv = document.getElementById('cv');
var ctx=cv.getContext('2d');
var watchedContext=new WatchedContext(ctx);

// do some drawings on the watched context
// --> they are performed also on the real context
watchedContext.beginPath();
watchedContext.moveTo(10, 10);
watchedContext.lineTo(100, 100);
watchedContext.stroke();

// clear context (not using the watched context to avoid recording)
ctx.clearRect(0,0,100,1000);

// replay what was recorded
watchedContext.replay();

您可以在这里看到：

http://jsbin.com/gehixavebe/2/edit?js,output

$ b b

重播会起作用，并且由于重播所存储的命令而重新绘制该行。

That the replay does work, and the line is re-drawn as a result of replaying the stored commands.

对于离线存储，您可以存储命令本地使用localStorage或将它们远程存储在使用AJAX调用或类似的服务器上。

For storing offline you can either store the commands locally using localStorage or store them remotely on a server an use AJAX calls or similar.

这篇关于HTML5画布 - 在画布上绘制，保存上下文并稍后还原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！