d3.js - 在 p5.js 中清除 draw() 中每帧都会改变的元素，但保留在 setup() 中创建的昂贵元素( map )

Question

使用p5.js和d3.js作图，我在setup()加载了一张美国特定县的 map 在 Canvas 上。这需要大约 1/2 - 1 秒才能加载，因为 shapefile 相当大

在 draw() ，我正在创建一些我想使用滑块更新的文本、椭圆等，并且可能会创建一些额外的动画。

通常在 p5.js 中，你可以只使用 background(255)紧随其后 draw()全部清除，并使过渡平滑，因此没有重叠，旧的椭圆和文本被擦干净等。

我遇到的问题是我的初始 map 加载成本很高，我无法将其清除并每帧重新绘制，它落后于所有。我需要绘制一次 map ，然后基本上对除 map 以外的所有其他元素进行背景(255)，或者基本上清除每帧在 draw() 中创建的所有内容，同时将我在 setup() 中创建的 map 留在 Canvas 。或者只是清除除 map 之外的所有元素。

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

https://editor.p5js.org/dfeusse/sketches/HkJe2Kj9m

下面是一个使用 background() 的例子这使得 p5.js 代码理想和干净，但是在 setup 中创建的 rect(即 map )显然被抹去了并消失了。

https://editor.p5js.org/dfeusse/sketches/HJWtr5oqQ

有没有一种方法可以在绘制所有其他元素的同时将一个元素保留在 Canvas 上，例如在概念上使用背景、清除或其他一些我显然不知道的方法？感谢您的任何想法和帮助!

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

Answer 1

您有几个选择:

如果 map 始终相同，则可以将其保存为图像文件。将其加载到 setup() 中的变量中函数，然后在draw()中绘制功能。

如果 map 可能在程序运行之间发生变化，那么您可以将 map 绘制到 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);
    }