实施例

Question

我制作了一个非常简单的像素画作＆＃39;程序使用HTML5 / Canvas。我想为用户提供返回历史记录的选项，例如Photoshop / Adobe程序中的“历史记录”面板。

基本上它是一个撤消按钮，但您可以回到行动的开始，并且还会有一个日志显示每个操作的详细信息。

这可能吗？我怎么会开始存储这些数据？

Chrome浏览器中有多少内存可用于在一个页面上显示？ - （对不起，如果这是愚蠢的问题，仍然是Javascript的新手并在浏览器中工作。）

我已阅读this undo button Question，这是类似的，但我想将有关数据的信息存储为可见。

非常感谢您提供任何帮助！

Answer 1

每次执行操作时，您都可以将当前画布复制到单独的画布。只需显示旧画布即可作为操作日志。

您可以直接向drawImage发送画布：

destContext.drawImage( srcCanvas, 0, 0 );

如果这种方法消耗太多内存，另一种方法是将所有命令存储在堆栈中，在撤消时删除最后一个元素，并从头开始重绘所有内容。

Answer 2

您需要构建一个简单的undo-redo堆栈。然后，您需要决定是否存储矢量数据或图像数据。后者效率更高，但也可以占用更多内存。您可能希望存储两种类型的数据（图像顶部的路径）。

该方法将采用简单的步骤：

存储新文档的初始状态。保持堆栈指针指向下一个空闲插槽（例如使用数组）。
当击中鼠标时（或其他一些会导致更改的操作）将堆栈指针向前移动。
释放鼠标按钮时，制作快照，创建缩略图等。如果要将图形存储为点或位图，则由您自己决定。如果位图数据可以通过使用例如zip压缩它来绕过存储空间。向前移动堆栈指针。如果此时堆栈中存在快照，请将其删除。
当您需要撤消时，只需缩回先前存储的步骤并将堆栈指针移回。通过保留快照，您可以通过向前移动堆栈指针来重做，并重绘快照（如果有）。
最后，为了可视化undo-redo堆栈，您可以简单地将每个快照渲染为一个单独的画布，然后将其提取为放入列表中的图像。

注意：在创建撤消状态时，在新堆栈指针位置之后清除任何快照很重要。这是因为如果使用了undo，则可以在没有更改的情况下使用重做。但是，如果使用撤消并添加了新绘图，则会使下一个状态无效，因此必须将其删除。

对于浏览器内存，它将取决于用户的系统。有些有几千兆字节，有些则有很多。没有办法知道。您必须选择适合您的方案的UX策略以及目标受众。

实施例

这不会实现处理缩略图同步的后勤工作，但还有其他大部分内容。我将剩下的作为练习。

＆＃13;

var ctx = c.getContext("2d"),
    stack = [],                  // undo-redo stack
    sp = 0,                      // stack pointer
    isDown = false;              // for drawing (demo)

capture();                       // create an initial undo capture (blank)

ctx.lineCap = "round";           // setup line for demo
ctx.lineWidth = 4;

// simple draw mechanism
c.onmousedown = function(e) {
  sp++;                          // on mouse down, move stack pointer to next slot
  isDown = true;                 // NOTE: clear any snapshots after this point (not shown)
  var pos = getXY(e);            // start drawing some line - how you draw is up to you
  ctx.beginPath();
  ctx.moveTo(pos.x, pos.y);
}

window.onmousemove = function(e) {
  if (!isDown) return;           // only for drawing
  var pos = getXY(e);
  ctx.lineTo(pos.x, pos.y);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(pos.x, pos.y);
}

window.onmouseup = function() {
  if (!isDown) return;
  isDown = false;
  capture();                     // capture an undo state
  makeThumb();                   // create and insert a thumbnail of state
};

function capture() {
  stack[sp] = c.toDataURL();     // one way, you could use getImageData, 
                                 // or store points instead.. it's up to you
}

// Creates a thumbnail of current canvas and insert into visible undo stack
function makeThumb() {
  var canvas = document.createElement("canvas");
  canvas.width = canvas.height = 64;
  var ctxTmp = canvas.getContext("2d");
  ctxTmp.drawImage(c, 0, 0, canvas.width, canvas.height);
  undos.appendChild(canvas);
}

// UNDO button clicked
undo.onclick = function() {
  var img = new Image;           // restore previous state/snapshot
  img.onload = function() {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.drawImage(this, 0, 0);
  }
  
  // move stack pointer back and get previous snapshot
  if (sp > 0) img.src = stack[--sp];
};

// REDO button clicked
redo.onclick = function() {
  
  // anything we can redo?
  if (sp < stack.length) {
    var img = new Image;
    img.onload = function() {
      ctx.clearRect(0, 0, c.width, c.height);
      ctx.drawImage(this, 0, 0);
    }
  
    // move stack pointer forward and get next snapshot
    img.src = stack[++sp];
  }
};

function getXY(e) {
  var r = c.getBoundingClientRect();
  return {x: e.clientX - r.left, y: e.clientY - r.top}
}

＆＃13;

#c {background:#ccc}

＆＃13;

<button id=undo>Undo</button>
<button id=redo>Redo</button><br>
<canvas id=c width=500 height=500></canvas>
<div id=undos></div>

＆＃13;

制作一个历史小组＆＃39;对于绘画程序

2 个答案:

实施例