Question

在 p5.js 中将画布复制到图形对象

2021-12-05

2064

processing p5.js

我无法找到参考资料或弄清楚这一点，但我很好奇是否有办法获取 p5.js 中绘制画布的当前状态并将其保存到图形对象中。

基本上，我在 setup 函数中做了很多预绘制，并希望对其进行快照以用作 draw 函数中的背景。

我意识到我可能会通过添加额外的图形对象为我的 setup 绘图增加一层额外的复杂性，但是将当前状态放入新对象/图像会容易得多（我有一个相当复杂的图形对象链，它们被放到主画布上）。

Answer 1

我相信您正在寻找的是 copy() 函数。它可用于在画布、 p5.Graphics 对象和 p5.Image 对象内和之间复制像素区域。从主画布复制到 p5.Image 时要注意的一件事是，主画布的像素密度取决于显示器（即高 DPI 显示器的密度为 2），但 p5.Image 对象没有密度。因此，对于高 DPI 显示器，您的 p5.Image 对象需要超大。因此，我认为最好使用 p5.Graphics 。这是一个简单的例子：

let buffer;

function setup() {
  let canvas = createCanvas(windowWidth, windowHeight);
  background(100);
  
  buffer = createGraphics(width, height);
  
  let saveButton = createButton("save");
  saveButton.position(20, 20);
  saveButton.mouseClicked(() => {
    // Copy from canvas into buffer
    buffer.copy(
      // source
      canvas,
      // source x, y, w, h
      0, 0, width, height,
      // destination x, y, w, h
      0, 0, buffer.width, buffer.height)
  });
  
  let restoreButton = createButton("restore");
  restoreButton.position(80, 20);
  restoreButton.mouseClicked(() => {
    // Copy from buffer into the canvas
    copy(buffer, 0, 0, buffer.width, buffer.height, 0, 0, width, height);
  });
}

function draw() {
  circle(mouseX, mouseY, 20);
}

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