javascript - 为什么这个撤消逻辑在 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>