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

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

在 p5.js 中，preload() 函数用于在 setup() 函数之前预加载资源，例如图片、字体和 JSON 数据。当需要先加载 JSON 数据，然后根据 JSON 数据中的信息加载其他资源（例如图片）时，需要特别注意异步加载的问题。本文将介绍如何正确地使用 loadJSON() 和 loadImage() 函数，确保所有资源都已加载完毕后再执行后续代码。

异步加载的问题

loadJSON() 和 loadImage() 函数都是异步的，这意味着它们不会阻塞程序的执行。当调用这些函数时，它们会立即返回，并在后台加载资源。这可能会导致在资源加载完成之前，程序就开始执行后续的代码，从而引发错误。

例如，如果尝试在 setup() 函数中使用尚未加载完成的图片，可能会遇到 null 或 undefined 的错误。

使用回调函数解决异步加载问题

为了解决异步加载的问题，可以使用回调函数。回调函数是在异步操作完成后执行的函数。loadJSON() 和 loadImage() 函数都接受一个可选的回调函数作为第二个参数。

以下是如何使用回调函数来加载 JSON 数据和图片的示例：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

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

function preload() {
  imgData = loadJSON("images.json", data => {
    imgData = data; // Assign the loaded data
    totalImages = imgData.images.length;
    for (let filename of imgData.images) {
      loadImage(filename, img => {
        images.push(img);
        numImagesLoaded++;
        if (numImagesLoaded === totalImages) {
          // All images are loaded, call a function to start the sketch
          startSketch();
        }
      });
    }
  });
}

function setup() {
  // setup() is now empty, startSketch() will be called when all images are loaded
}

function startSketch() {
  createCanvas(400, 400);
  background(220);
  // Now you can safely use the images array
  for (let i = 0; i < images.length; i++) {
    image(images[i], i * 50, 0, 50, 50); // Display the images
  }
}

代码解释:

1. imgData: 用于存储从 JSON 文件加载的数据。
2. images: 用于存储加载的图片。
3. numImagesLoaded: 计数器，记录已加载的图片数量。
4. totalImages: 从JSON文件中读取，表示需要加载的图片总数。
5. preload():
   • 使用 loadJSON() 函数加载 "images.json" 文件。
   • loadJSON() 的第二个参数是一个回调函数，该函数在 JSON 数据加载完成后执行。
   • 在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图片。
   • loadImage() 函数也接受一个回调函数，该函数在图片加载完成后执行。
   • 在 loadImage() 的回调函数中，将加载的图片添加到 images 数组，并将 numImagesLoaded 计数器加 1。
   • 当 numImagesLoaded 等于 totalImages 时，表示所有图片都已加载完成，调用 startSketch() 函数开始绘图。
6. setup(): 现在是空的，因为所有初始化工作都在 startSketch() 函数中完成。
7. startSketch():
   • 创建画布并设置背景颜色。
   • 遍历 images 数组，并将加载的图片绘制到画布上。

images.json 示例:

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

确保 1.jpg, 2.jpg, 和 3.jpg 文件存在于你的 sketch 的相应目录下。

注意事项

• 确保 JSON 文件和图片文件都位于正确的目录中，以便 p5.js 能够找到它们。
• preload() 函数必须在 setup() 函数之前定义。
• 在 preload() 函数中加载所有必要的资源，以确保在 setup() 函数执行时，所有资源都已加载完毕。
• 正确处理异步加载，使用回调函数或 Promise 来确保资源加载顺序。

总结

通过使用 loadJSON() 和 loadImage() 函数的回调函数，可以确保在 JSON 数据和图片加载完成之后再执行后续代码，避免因异步加载导致的问题。这种方法可以有效地管理资源的加载顺序，并提高程序的稳定性和可靠性。记住，理解并正确处理异步加载是编写高质量 p5.js 代码的关键。

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