如何在画布中实现撤销功能？

Question

我有一个HTML5画布。

我想创建一个带有撤销功能的按钮。

我该怎么做呢？

我的想法是使用一个数组栈。每次你画完并松开鼠标时，它就会通过push将画布图像保存到撤销数组栈中。但当我尝试时，它并没有真正起作用……有更好的想法吗？

先谢谢您！

var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');
var sketch = document.getElementById('sketch');
var sketch_style = getComputedStyle(sketch);

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineJoin = 'round';
ctx.lineCap = 'round';

ctx.strokeStyle = "red";
function getColor(colour){ctx.strokeStyle = colour;}

function getSize(size){ctx.lineWidth = size;}

canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);

canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};   

- itranger

---

https://dev59.com/cmQn5IYBdhLWcg3wCjb0 - Paul Fitzgerald

可能是使用Canvas实现绘图程序的撤销/重做的重复问题。 - gaetanoM

Answer 1

这是我会做的方法：

主要思路是：在 mouseup 事件中，将最后一次绘制的路径保存在一个数组中。当点击撤销按钮时，从路径数组中删除最后一条路径。接着，我会清除所有内容并重新绘制路径数组中的所有路径。

我使用了一个变量 drawing，一开始其值为 false。 当我点击画布时，drawing 变成 true。 在 mouseup 事件中，drawing 变回 false。 只有当 drawing == true 时我才能进行绘制操作。

const canvas = document.getElementById('paint');
const ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height=200;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = "red";
let drawing = false;
let pathsry = [];
let points = [];

var mouse = {x: 0, y: 0};
var previous = {x: 0, y: 0};

canvas.addEventListener('mousedown', function(e) {
drawing = true; 
previous = {x:mouse.x,y:mouse.y};
mouse = oMousePos(canvas, e);
points = [];
points.push({x:mouse.x,y:mouse.y})
});

canvas.addEventListener('mousemove', function(e) {
if(drawing){
previous = {x:mouse.x,y:mouse.y};
mouse = oMousePos(canvas, e);
// saving the points in the points array
points.push({x:mouse.x,y:mouse.y})
// drawing a line from the previous point to the current point
ctx.beginPath();
ctx.moveTo(previous.x,previous.y);
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
}
}, false);


canvas.addEventListener('mouseup', function() {
drawing=false;
// Adding the path to the array or the paths
pathsry.push(points);
}, false);


undo.addEventListener("click",Undo);

function drawPaths(){
  // delete everything
  ctx.clearRect(0,0,canvas.width,canvas.height);
  // draw all the paths in the paths array
  pathsry.forEach(path=>{
  ctx.beginPath();
  ctx.moveTo(path[0].x,path[0].y);  
  for(let i = 1; i < path.length; i++){
    ctx.lineTo(path[i].x,path[i].y); 
  }
    ctx.stroke();
  })
}  

function Undo(){
  // remove the last path from the paths array
  pathsry.splice(-1,1);
  // draw all the paths in the paths array
  drawPaths();
}


// a function to detect the mouse position
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
 return { //objeto
 x: Math.round(evt.clientX - ClientRect.left),
 y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid}

<button id="undo">undo</button><br>
<canvas id="paint"></canvas>

- enxaneta

---

老哥，我也实现过这个，但当堆栈很大时它会阻塞主线程导致无法绘制。 - Abhay