上面定义了一个名为 HelperFunctions 的对象，它包含清除、保存图像、撤消和重做按钮的事件处理程序。 clearButton 处理程序清除画布，saveImageButton 处理程序将画布保存为 JPG 文件，undoButton 处理程序从数组中弹出最后的绘图状态并重绘画布，redoButton 处理程序将最后弹出的绘图状态推回数组并重绘画布。除了重做和撤消按钮外，一切正常。
function HelperFunctions() {
// Drawing state stack to keep track of undo/redo
let drawingStates = [];
let currentStateIndex = -1;
// Function to save the current drawing state
function saveDrawingState() {
// Get the current drawing state as an image
let img = get();
// Increment the current index to make room for the new state
currentStateIndex++;
// If there are states after the current one, remove them
if (currentStateIndex < drawingStates.length) {
drawingStates.splice(currentStateIndex);
}
// Add the new drawing state to the stack
drawingStates.push(img);
}
//p5.dom click click events. Notice that there is no this. at the
//start we don't need to do that here because the event will
//be added to the button and doesn't 'belong' to the object
//event handler for the clear button event. Clears the screen
select("#clearButton").mouseClicked(function() {
background(255);
//call loadPixels to update the drawing state
//this is needed for the mirror tool
loadPixels();
// Save the new drawing state
saveDrawingState();
});
//event handler for the save image button. saves the canvsa to the
//local file system.
select("#saveImageButton").mouseClicked(function() {
saveCanvas('myCanvas', 'jpg');
});
select("#undoButton").mouseClicked(function() {
// Make sure there are states to undo to
if (currentStateIndex > 0) {
// Decrement the current index to get the previous state
currentStateIndex--;
// Load the previous state from the stack
let img = drawingStates[currentStateIndex];
// Display the previous state on the canvas
image(img, 0, 0);
// Call loadPixels to update the drawing state
// This is needed for the mirror tool
loadPixels();
}
});
select("#redoButton").mouseClicked(function() {
// Make sure there are states to redo to
if (currentStateIndex < drawingStates.length - 1) {
// Increment the current index to get the next state
currentStateIndex++;
// Load the next state from the stack
let img = drawingStates[currentStateIndex];
// Display the next state on the canvas
image(img, 0, 0);
// Call loadPixels to update the drawing state
// This is needed for the mirror tool
loadPixels();
}
});
}
html:
<!DOCTYPE html>
<html>
<head>
<script src="lib/p5.min.js"></script>
<script src="sketch.js"></script>
<!-- add extra scripts below -->
<script src="toolbox.js"></script>
<script src="colourPalette.js"></script>
<script src="helperFunctions.js"></script>
<script src="freehandTool.js"></script>
<script src="lineToTool.js"></script>
<script src="mirrorDrawTool.js"></script>
<script src="sprayCanTool.js"></script>
<script src="markerTool.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script></script>
</head>
<body>
<div class="wrapper">
<div class="box header">
My Drawing App
<button id="clearButton">Clear</button>
<button id="saveImageButton">Save Image</button>
<button id="undoButton">Undo</button>
<button id="redoButton">Redo</button>
</div>
<div class="box" id="sidebar"></div>
<div id="content"></div>
<div class="colourPalette">
<canvas id="color-picker"></canvas>
<div class="info">
<h3>Selected color</h3>
<div class="selected"></div>
</div>
</div>
<div class="box options"></div>
</div>
</body>
</html>
我尝试过的任何事情都没有产生任何结果，我完全停止了可能是什么问题。
如评论中所述，无法根据您提供的内容说出问题所在。然而，有一些突出的特质：
saveDrawingState()drawingStatessaveDrawingState()if (currentStateIndex > 0)这是我假设您期望撤消/重做/清除会做的最小工作示例。 （点击画布绘制圆圈，然后使用按钮）
let helper;
let canvas;
function setup() {
canvas = createCanvas(400, 400);
noLoop();
let undo = createButton('undo');
undo.id('undoButton');
undo.parent('toolbar');
let redo = createButton('redo');
redo.id('redoButton');
redo.parent('toolbar');
let clear = createButton('clear');
clear.id('clearButton');
clear.parent('toolbar');
helper = new HelperFunctions();
}
function draw() {
}
function mouseClicked(e) {
if (e.target == canvas.elt) {
circle(mouseX, mouseY, 50);
helper.saveDrawingState();
}
}
function HelperFunctions() {
// Drawing state stack to keep track of undo/redo
let drawingStates = [];
let currentStateIndex = -1;
// Function to save the current drawing state
this.saveDrawingState = function() {
// Get the current drawing state as an image
let img = get();
// Increment the current index to make room for the new state
currentStateIndex++;
// If there are states after the current one, remove them
if (currentStateIndex < drawingStates.length) {
drawingStates.splice(currentStateIndex);
}
// Add the new drawing state to the stack
drawingStates.push(img);
}
select("#clearButton").mouseClicked(() => {
background(255);
// Save the new drawing state
this.saveDrawingState();
});
select("#undoButton").mouseClicked(function () {
// Make sure there are states to undo to
if (currentStateIndex >= 0) {
// Decrement the current index to get the previous state
currentStateIndex--;
console.log(`undo (new state: ${currentStateIndex})`);
clear();
if (currentStateIndex >= 0) {
// Load the previous state from the stack
let img = drawingStates[currentStateIndex];
// Display the previous state on the canvas
image(img, 0, 0);
}
}
});
select("#redoButton").mouseClicked(function () {
// Make sure there are states to redo to
if (currentStateIndex < drawingStates.length - 1) {
// Increment the current index to get the next state
currentStateIndex++;
// Load the next state from the stack
let img = drawingStates[currentStateIndex];
clear();
// Display the next state on the canvas
image(img, 0, 0);
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<div id="toolbar"></div>