使用 p5.js 预加载 JSON 数据中的图片

本文旨在解决 p5.js 中预加载 JSON 数据，并根据 JSON 数据中的文件名列表加载图片资源的问题。由于 loadJSON() 和 loadImage() 都是异步函数，直接使用会导致图片未加载完成就开始执行后续代码。本文将介绍如何利用 loadJSON() 的回调函数确保在所有图片加载完成后再开始执行 setup() 函数，避免出现资源未加载完全的问题。

利用 loadJSON 的回调函数

loadJSON() 函数允许传入一个回调函数作为第二个参数。这个回调函数会在 JSON 数据加载完成后被调用。我们可以利用这个特性，在回调函数中加载图片，从而保证 JSON 数据加载完成后再加载图片。

示例代码

假设你有一个名为 images.json 的文件，内容如下：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

{
  "images": ["1.jpg", "2.jpg", "3.jpg"]
}

以下代码展示了如何使用 loadJSON() 的回调函数来加载图片：

let imgData;
let images = [];
let numImagesLoaded = 0;

function preload() {
  imgData = loadJSON("images.json", data => {
    imgData = data; // 确保 imgData 在回调函数外部可用
    for (let filename of imgData.images) {
      loadImage(filename, img => {
        images.push(img); // 将加载的图片添加到数组中
        numImagesLoaded++;
        if (numImagesLoaded === imgData.images.length) {
          console.log("所有图片加载完成！");
        }
      });
    }
  });
}

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
}

function draw() {
  background(220);
  // 确保所有图片加载完成后再绘制
  if (numImagesLoaded === imgData.images.length) {
    for(let i = 0; i < images.length; i++){
      image(images[i], width / 2 + i * 50, height / 2, 50, 50);
    }
  } else {
    text("Loading...", width / 2, height / 2);
    textAlign(CENTER, CENTER);
  }
}

代码解释

1. preload() 函数:
   • 使用 loadJSON("images.json", data => { ... }) 加载 JSON 数据。data 参数是加载完成的 JSON 对象。
   • 在回调函数中，遍历 imgData.images 数组，使用 loadImage() 函数加载每个图片。
   • loadImage() 函数同样是异步的，所以我们使用它的回调函数来跟踪图片的加载进度。
   • 每次图片加载完成，numImagesLoaded 计数器加 1。
   • 当 numImagesLoaded 等于 imgData.images.length 时，表示所有图片都已加载完成。
2. setup() 函数:
   • 创建画布。
   • 设置 imageMode(CENTER)，使图片以中心点为基准绘制。
3. draw() 函数:
   • 清空画布。
   • 检查 numImagesLoaded 是否等于 imgData.images.length。如果是，则绘制所有图片；否则，显示 "Loading..." 文本。

注意事项

• 确保 images.json 文件存在，并且文件路径正确。
• loadImage() 函数也是异步的，所以需要使用回调函数来跟踪图片的加载进度。
• 在 draw() 函数中，需要检查所有图片是否加载完成，然后再进行绘制操作，避免出现错误。
• 如果图片数量很多，可以使用更高效的加载方式，例如使用 Promise 或 async/await。

总结

通过使用 loadJSON() 的回调函数，我们可以确保在 JSON 数据加载完成后再加载图片，从而避免出现资源未加载完全的问题。这种方法简单易懂，适用于大多数情况。同时，需要注意 loadImage() 函数也是异步的，需要使用回调函数来跟踪图片的加载进度。

以上就是使用 p5.js 预加载 JSON 数据中的图片的详细内容，更多请关注php中文网其它相关文章！