为什么这个撤消逻辑在 p5.js 中不起作用？

Question

我的逻辑很简单，创建一个状态数组和一个stateIndex，当用户与绘图交互时，将当前状态保存为数组中的条目并递增stateIndex。

当用户按下“撤消”时（对于此草图，请按任意键），递减 stateIndex 并将该索引的状态值绘制到页面。

我已经在此草图中实现了它 https://editor.p5js.org/mr_anonymous/sketches/ s0C1M7x1w 但正如您所看到的，它似乎只存储空白状态，而不是存储绘图的最后状态。

有人知道出了什么问题吗？

let previousState;

let stateIndex = 0;
let state = [];

function setup() {
  createCanvas(400, 400);
  background(255);
  // save state at beginning for blank canvas
  saveState();
}

function draw() {
  if (mouseIsPressed) {
    fill(0, 0, 0);
    circle(mouseX, mouseY, 20);
  }
}

function keyPressed(e) {
  undoToPreviousState();
}

function undoToPreviousState() {
  if (!state || !state.length || stateIndex === 0) {
    return;
  }

  stateIndex --;
  
  background(255);
  set(state[stateIndex], 0, 0);
}

function mousePressed() {

  saveState();
}

function saveState() {
  stateIndex ++;

  loadPixels();
  state.push({...get()})
}

Answer 1

您错误地使用了 set() 函数。虽然 get() 可用于获取 p5.Image 对象，但 set() 不存在需要 1 的重载（有点我知道，很特殊）。相反，您需要使用 image() 函数：

let previousState;

let stateIndex = 0;
let state = [];

function setup() {
  createCanvas(400, 400);
  background(200);
  // save state at beginning for blank canvas
  saveState();
}

function draw() {
  if (mouseIsPressed) {
    fill(0, 0, 0);
    circle(mouseX, mouseY, 20);
  }
}

function keyPressed(e) {
  undoToPreviousState();
}

function undoToPreviousState() {
  if (!state || !state.length || stateIndex === 0) {
    return;
  }

  stateIndex--;
  
  background(200);
  image(state[stateIndex], 0, 0);
}

function mousePressed() {
  saveState();
}

function saveState() {
  stateIndex++;

  loadPixels();
  state.push(get())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>