javascript全栈开发实践-web-4

接下来，我们继续完善功能。作为一个手写应用，undo/redo操作是必须的。要现实undo/redo，最容易想到的实现方式，就是我们记住每一次操作的结果，在用户undo的时候，显示之前的结果给用户就可以了。但是这样有一个很大的问题，就是我们的canvas，实际上一张图片。要记住结果，就需要记住这张图片的内容。而图片本身的数据量是很大的。因此我们没有办法记住很多次结果，也就是限制了undo的次数。还有一种办法，就是我们记住用户的操作，例如我们记住第一次用户用铅笔，画了一条线，这条线上面每一个点的坐标是什么，我们都给记下来。在用户undo的时候，我们可以清空画板，然后从头到尾再画一次所有的操作，这样就可以实现undo功能了。由于用户操作相对的数据，相对于图片本身的数据来说，要小很多，因此，我们几乎可以无限制的undo/redo了。要记住用户操作，那么在鼠标操作的时候，我们就需要记住每一个鼠标的位置，然后加入到数组里面。在用户鼠标松开的时候，我们再把整个路径的坐标，以及笔画粗细，颜色，作为一个完整的操作，添加到用户数组里面。下面是完整的代码

<html><head><meta charset="utf-8"></head><body style='background:lightgrey'><div><button id='pencil' onclick="handleChoosePencil()">pencil</button><button id='highlighter' onclick="handleChooseHighlighter()">highlighter</button><button id='eraser' onclick="handleChooseEraser()">eraser</button><button id='undo' onclick="handleUndo()">undo</button><button id='redo' onclick="handleRedo()">redo</button></div><canvas id='pad' width='800px' height='600px' style='background:white'></canvas></body><script>//let actions = [];let points = [];let undoCursor = -1;//const pad = document.getElementById('pad');const ctx = pad.getContext('2d');ctx.lineWidth = 2;ctx.strokeStyle = 'blue';//updateButtonStatus();////pad.addEventListener('mousedown', handleMouseDown);//function handleMouseDown(event) {//if (undoCursor != -1) {actions = actions.slice(0, undoCursor);}undoCursor = -1;//ctx.beginPath();ctx.moveTo(event.offsetX, event.offsetY);//pad.addEventListener('mousemove', handleMouseMove);pad.addEventListener('mouseup', handleMouseUp);//points.push({x: event.offsetX, y: event.offsetY});      }//function handleMouseMove(event) {ctx.lineTo(event.offsetX, event.offsetY);ctx.stroke();ctx.beginPath();ctx.moveTo(event.offsetX, event.offsetY);points.push({x: event.offsetX, y: event.offsetY});      }//function handleMouseUp(event) {pad.removeEventListener('mousemove', handleMouseMove);pad.removeEventListener('mouseup', handleMouseUp);//actions.push({lineWidth: ctx.lineWidth,strokeStyle: ctx.strokeStyle,points,});//points = [];updateButtonStatus();}//function handleChoosePencil(event) {ctx.strokeStyle = 'rgb(0, 0, 255)';ctx.lineWidth = 2;}//function handleChooseHighlighter(event) {ctx.strokeStyle = 'rgba(255, 255, 0, 0.5)';ctx.lineWidth = 8;}//function handleChooseEraser(event) {ctx.strokeStyle = 'white';ctx.lineWidth = 8;}//function canUndo() {if (actions.length == 0) {return false;}//if (undoCursor == 0) {return false;}//return true;}//function canRedo() {//if (actions.length == 0) {return false;}//if (undoCursor == -1 || undoCursor == actions.length) {return false;}//return true;}//function handleUndo(event) {if (!canUndo()) {return;}//if (undoCursor == -1) {undoCursor = actions.length;}//undoCursor--;//repaint();//updateButtonStatus();}//function handleRedo(event) {if (!canRedo()) {return;}//undoCursor++;//repaint();//updateButtonStatus();}//function updateButtonStatus() {const undoButton = document.getElementById('undo');const redoButton = document.getElementById('redo');undoButton.disabled = !canUndo();redoButton.disabled = !canRedo();}//function repaint() {ctx.clearRect(0, 0, pad.width, pad.height);//let toIndex = undoCursor == -1 ? actions.length : undoCursor;for (let i = 0; i < toIndex; i++) {//let action = actions[i];//ctx.beginPath();ctx.lineWidth = action.lineWidth;ctx.strokeStyle = action.strokeStyle;//let points = action.points;if (points.length == 0) {continue;}//let firstPoint = points[0];ctx.moveTo(firstPoint.x, firstPoint.y);for (let j = 1; j < points.length; j++) {const point = points[j];ctx.lineTo(point.x, point.y);}ctx.stroke();//}}</script>
</html>
复制代码

记录用户操作：

首先，我们定义了一个points数组，用来在鼠标按下以及移动的时候，记录完整的鼠标坐标。我们还定义了一个actions数组，这个就是用来存放用户每一个操作的数组。在用户鼠标松开的时候，我们会把当前操作添加到这个actions数组后面：

    function handleMouseUp(event) {pad.removeEventListener('mousemove', handleMouseMove);pad.removeEventListener('mouseup', handleMouseUp);//actions.push({lineWidth: ctx.lineWidth,strokeStyle: ctx.strokeStyle,points,});//points = [];updateButtonStatus();}
复制代码

我们在这里记录了当前路径所有的坐标（points），当前路径的宽度，以及颜色。把他们组合成一个对象添加到actions数组里面。在添加完之后，我们还需要记住，要把points数组重置，准备记录下一个操作的坐标。

执行undo

在用户进行undo的时候，最容易想到的办法，就是用户每执行一次undo，我们就把actions数组中最后一个元素删除，然后重新绘制actions里面的所有元素。但是这样以来，我们就没办法实现redo操作了。因此，在用户undo的时候，我们可以通过一个游标（actions数组下标），记录当前用户undo到哪一步了。当用户undo的时候，游标向数组头部移动。当用户redo的时候，游标向数组尾部移动。首先，我们需要定义一个undoCursor，并把他的初始值设置成-1。之所以设置成-1，是因为数组的下标永远应该是大于等于0的。那么如果是-1，表示当前游标在数组最后面，用户没有任何undo操作。下面的代码，可以判断当前是否允许undo/redo

    function canUndo() {if (actions.length == 0) {return false;}//if (undoCursor == 0) {return false;}//return true;}function canRedo() {//if (actions.length == 0) {return false;}//if (undoCursor == -1 || undoCursor == actions.length) {return false;}//return true;}
复制代码

当用户undo/redo的时候，我们去移动游标：

    function handleUndo(event) {if (!canUndo()) {return;}//if (undoCursor == -1) {undoCursor = actions.length;}//undoCursor--;//repaint();//updateButtonStatus();}//function handleRedo(event) {if (!canRedo()) {return;}//undoCursor++;//repaint();//updateButtonStatus();}
复制代码

在移动完游标后，我们还需要进行重绘。重绘很简单，就是清空canvas，然后从头到尾重新绘制路径即可：

    function repaint() {ctx.clearRect(0, 0, pad.width, pad.height);//let toIndex = undoCursor == -1 ? actions.length : undoCursor;for (let i = 0; i < toIndex; i++) {//let action = actions[i];//ctx.beginPath();ctx.lineWidth = action.lineWidth;ctx.strokeStyle = action.strokeStyle;//let points = action.points;if (points.length == 0) {continue;}//let firstPoint = points[0];ctx.moveTo(firstPoint.x, firstPoint.y);for (let j = 1; j < points.length; j++) {const point = points[j];ctx.lineTo(point.x, point.y);}ctx.stroke();//}}
复制代码

当用户undo/redo之后，继续进行新的绘画的时候，我们还需要删除游标后面的数据，并且重置游标的位置：

      if (undoCursor != -1) {actions = actions.slice(0, undoCursor);}undoCursor = -1;
复制代码

最后，我们还需要在添加新的undo/redo按钮，并响应按钮消息，进行undo/redo处理。同时，在合适的时机，我们还需要更新undo/redo按钮的状态，以便告诉用户，什么时候可以undo/redo。

转载于:https://juejin.im/post/5cc2e60f6fb9a0321b6970c4