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

Posted 2023-04-19

【中文标题】将画布复制到 p5.js 中的图形对象

【英文标题】：Copy canvas to graphics object in p5.js

【发布时间】：2022-01-10 19:33:16

【问题描述】：

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

基本上，我在setup 函数中进行了大量预绘图，并希望将其快照用作draw 函数中的背景。

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

【问题讨论】：

我会稍等片刻，看看是否有人弹出一个易于使用的功能，但我最终将原始像素阵列复制到备份，然后在每个循环中重新编写。跨度>

【参考方案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>

【讨论】：

啊，太好了！我一直在使用复制功能，但由于某种原因无法让它工作。这是一个很好的例子。