如何在画布上创建撤消功能? [英] How to make an undo function in canvas?

问题描述

我有一个HTML5画布绘图板.

I have a canvas HTML5 drawing pad.

我想创建一个带有撤消功能的按钮.

I would like to create a button with an undo function.

我该怎么办?

我的想法是拥有一个数组堆栈.每当您绘制并释放鼠标时，它都会通过推送将画布图像保存到撤消数组堆栈中.但是，当我尝试过时，它实际上并没有工作...还有更好的主意吗?

My idea was to have one array stack. Anytime you draw and release the mouse, it saves the canvas image to the undo array stack by push. But as I tried it, it doesn't really work... Is there a better idea?

提前谢谢！

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();
};   

推荐答案

这就是我要这样做的方式:

This is how I would do it:

主要思想是:在 mouseup 上，我将最后绘制的路径保存在数组中.当我单击撤消按钮时，我从路径数组中删除了最后一个路径.我要删除所有内容，然后在paths数组中绘制所有路径.

The main idea is: on mouseup I'm saving the last drawn path in an array. When I click the undo button I remove the last path from the paths array. I'm deleting everything and next I draw all the paths in the paths array.

我使用的变量 drawing 开头是假的.当我在画布上单击时， drawing 是真实的.在 mouseup 上 drawing 上为false.仅当 drawing == true 时我才可以绘制.

I'm using a variable drawing that at the beginning is false. When I click on the canvas drawing is true. on mouseup drawing is false. Only if drawing == true I can draw.

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>

这篇关于如何在画布上创建撤消功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！