为什么这个撤消逻辑在 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() 的重载需要一个对象（我知道这有点特殊）。相反，您需要使用 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>

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

Why does this undo logic not work in p5.js?

javascript

p5.js