如何在 p5.js 的 draw() 函数中加载图像？

Question

我正在使用 p5.js 语言在 Processing 中编写程序。该程序使用 voronoi 图根据光标所在的位置在背景中显示图像。有超过 150 张图像我不想重复运行 loadImage()，这就是为什么我更喜欢使用这种方法。

function draw() {
  img_found = false;
  image(voronoi_diagram, 0, 0, windowWidth, windowHeight);
  voronoi_diagram.resize(windowWidth, windowHeight);
  color_on_hover = voronoi_diagram.get(mouseX, mouseY);
  
  i = 0;
  while (!img_found) {
    if (colors_list[i] == color_on_hover) {
      displayed_img = loadImage("data/" + img_name_list[i] + "_f.jpg");
      image(displayed_img, 0, 0, windowWidth, windowHeight);
      img_found = true;
    }
    else {
      i = i + 1;
      img_found = false;
    }  
  }
}

我认为这不起作用，因为我无法在 draw() 中使用 loadImage()。那我有什么选择呢？

---

我尝试的另一种方法是将每个图像保存到一个列表（如下所示），然后在 draw() 中使用“loadImage(i)”。这没有用。

  img_list = [];
  for(let i=0; i < img_name_list.length; i++) {
    append(img_list, loadImage("data/" + champion_list[i] + "_f.jpg"))
  }

Answer 1

问题是 loadImage 加载不会立即发生它会在绘制结束后完成。您可以使用 var 在 onload() 中设置

var loadedImage=null;

loadImage("yourPath",(yourimage)=>{loadedImage=yourimage;});
image(loadedImage, 0, 0, windowWidth, windowHeight);

不是最好的方法。如果您有一个基于颜色的索引，例如 "255,34,55"=>loadImage();，那么将它们加载到列表中的另一种方法会起作用；然后通过索引找到它们。