D3.js 在p5.js中，清除draw（）中的元素，这些元素会更改每一帧，但会保留在setup（）中创建的昂贵元素（贴图）

使用p5.js和d3.js进行映射，我在画布上的

setup（）

中加载了特定县的美国地图。由于shapefile相当大，因此加载大约需要1/2-1秒

在

draw（）

中，我正在创建一些文本、省略号等，我想使用滑块更新这些文本、省略号等，并且可能会创建一些额外的动画

通常在p5.js中，您只需在

draw（）

之后使用

background（255）

即可擦除所有内容，并使过渡平滑，以便没有重叠、旧的省略号和文本被擦除干净，等等

我遇到的问题是，我的初始贴图加载成本太高，我无法擦除它并在每一帧重新绘制，它落后于所有帧。我需要绘制一次贴图，然后在除贴图之外的所有其他元素上创建背景（255），或者在画布上保留在setup（）中创建的贴图时，基本上清除在draw（）中每帧创建的所有内容。或者只需清除地图以外的所有元素。

下面是我在p5编辑器中编写的假设代码。背景中的矩形是地图的占位符。您可以看到，因为文本和省略号没有被删除，所以它们会重叠，一旦省略号达到一定的大小，您就无法减小它们的大小，因为大的省略号仍然存在

下面是一个使用

background（）

的示例，这使得p5.js代码非常理想和干净，但是在安装程序中创建的rect（即映射）显然被删除并消失

有没有一种方法可以在画布上保留一个元素，同时覆盖所有其他元素，比如在概念上使用背景、清除或其他一些我显然不太了解的方法？谢谢你的任何想法和帮助

下面是一个屏幕截图，您可以看到我正在绘制的地图，基本上与占位符rect相同，并尝试使用滑块更改椭圆。

---

您有两个选择：

• 如果贴图始终相同，则可以将其保存到图像文件中。将其加载到

  setup（）

  函数中的变量中，然后在

  draw（）

  函数中绘制它

• 如果映射可能在程序运行之间发生变化，则可以在

  setup（）

  中将映射绘制到缓冲区，然后在

  draw（）

  中绘制该缓冲区。

  createGraphics（）

  函数将在这里派上用场

下面是一个简化的示例：

    var pg;

    function setup() {
      createCanvas(100, 100);
      pg = createGraphics(100, 100);
      pg.background(100);
      pg.noStroke();
      pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
    }

    function draw() {
      background(200);
      image(pg, 50, 50);
      image(pg, 0, 0, 50, 50);
    }

---

你怎么画这个背景呢？如果将其加载到

设置

中的

图像

变量中，则在

绘图

中可能会显示得更快。如果背景图像与画布大小相同，则无需在

绘图（）中清除背景，只需
图像（pg，0，0）是enough@rioV8这将取决于上下文。例如，如果背景图像包含透明度，则可能仍希望清除旧帧。还请注意，您可以将图像直接传递到
background（）
函数中。但同样，这一切都取决于上下文。我的回答只是一个一般性的例子，而不是针对所有情况。你用纯色清除pg背景，所以没有transparencies@rioV8是的，在这个特殊的例子中。但这完全取决于上下文。@KevinWorkman和riov8非常感谢您的回答和帮助！我认为这两种选择都可以。为了在2秒钟内添加上下文，我基本上使用这个示例作为起点，并在setup（）中使用d3.json（）加载映射。地图将是静态的。我试着用谷歌搜索缓冲区，看到了这个链接。凯文，对不起，我是自学成才的人，不是计算机科学知识的圣地，你有解释屏幕外缓冲区的参考资料吗？试着想想你的两个REC之间的权衡。