contenteditable实现简单画布增加撤销功能

有勇气的牛排 361 前端 2024-11-26 22:05:16

js

基于上篇文章，js部分参考如下，在绘制过程中，将每步进行记录。

/**
* 绘制函数：用于在画布上创建一个小圆点作为画笔
* */
function draw(e) {
console.log(e)
logEvent('Keydown 事件', `${e}`);

// 创建一个新的div元素，用于表示画笔
const brush = document.createElement('div');
    brush.classList.add('brush');
    
    // 设置画笔的位置，基于鼠标的当前位置，并且让画笔的中心与鼠标位置对齐
    brush.style.left = `${e.offsetX - 2}px`; // 横坐标位置，减去2px使画笔居中
    brush.style.top = `${e.offsetY - 2}px`; // 纵坐标位置，减去2px使画笔居中
    
    // 将创建的画笔元素添加到画布中
    canvas.appendChild(brush);
    
    // 保存绘制动作到撤销栈
    undoStack.push({element: brush, action: 'draw'});
    // 清空回退栈，因为新的绘制操作会破坏回退操作
    redoStack = [];

}


let undoStack = []; // 用于保存历史记录
let redoStack = []; // 用于保存已撤销的操作


// 撤销功能：从撤销栈中取出最后一个操作并移除
undoBtn.addEventListener('click', () => {
if (undoStack.length > 0) {
  const lastAction = undoStack.pop();
  if (lastAction.action === 'draw') {
    // 移除画布上的最后一个元素
    canvas.removeChild(lastAction.element);
    redoStack.push(lastAction); // 将移除的元素保存到回退栈中
  }
}
});

// 回退功能：将最后一个撤销的操作重新添加到画布
redoBtn.addEventListener('click', () => {
if (redoStack.length > 0) {
  const lastUndo = redoStack.pop();
  if (lastUndo.action === 'draw') {
    // 将撤销的元素重新添加回画布
    canvas.appendChild(lastUndo.element);
    undoStack.push(lastUndo); // 将回退的操作重新保存到撤销栈中
  }
}
});

html

<div>
    <button id="undoBtn">撤销</button>
    <button id="redoBtn">回退</button>
</div>

<h2><a id="js_0"></a>js</h2> 基于上篇文章，js部分参考如下，在绘制过程中，将每步进行记录。 <pre><div class="hljs"><code class="lang-javascript">/** * 绘制函数：用于在画布上创建一个小圆点作为画笔 * */ function draw(e) { console.log(e) logEvent('Keydown 事件', `${e}`); // 创建一个新的div元素，用于表示画笔 const brush = document.createElement('div'); brush.classList.add('brush'); // 设置画笔的位置，基于鼠标的当前位置，并且让画笔的中心与鼠标位置对齐 brush.style.left = `${e.offsetX - 2}px`; // 横坐标位置，减去2px使画笔居中 brush.style.top = `${e.offsetY - 2}px`; // 纵坐标位置，减去2px使画笔居中 // 将创建的画笔元素添加到画布中 canvas.appendChild(brush); // 保存绘制动作到撤销栈 undoStack.push({element: brush, action: 'draw'}); // 清空回退栈，因为新的绘制操作会破坏回退操作 redoStack = []; } let undoStack = []; // 用于保存历史记录 let redoStack = []; // 用于保存已撤销的操作 // 撤销功能：从撤销栈中取出最后一个操作并移除 undoBtn.addEventListener('click', () => { if (undoStack.length > 0) { const lastAction = undoStack.pop(); if (lastAction.action === 'draw') { // 移除画布上的最后一个元素 canvas.removeChild(lastAction.element); redoStack.push(lastAction); // 将移除的元素保存到回退栈中 } } }); // 回退功能：将最后一个撤销的操作重新添加到画布 redoBtn.addEventListener('click', () => { if (redoStack.length > 0) { const lastUndo = redoStack.pop(); if (lastUndo.action === 'draw') { // 将撤销的元素重新添加回画布 canvas.appendChild(lastUndo.element); undoStack.push(lastUndo); // 将回退的操作重新保存到撤销栈中 } } }); </code></div></pre> <h2><a id="html_60"></a>html</h2> <pre><div class="hljs"><code class="lang-html"><div> <button id="undoBtn">撤销</button> <button id="redoBtn">回退</button> </div> </code></div></pre>

contenteditable实现简单画布 增加撤销功能

js

html

留言

contenteditable实现简单画布增加撤销功能