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

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

本文将介绍一种在 p5.js 中预加载 JSON 数据并根据 JSON 数据加载图像的方法，确保在 setup() 函数开始执行时，所有图像资源都已加载完成。 这在处理依赖于外部数据（例如配置文件或图像列表）的项目中非常有用。

问题：

通常，loadJSON() 和 loadImage() 函数都是异步的。这意味着它们不会阻塞代码的执行，而是在后台加载数据或图像。 如果 setup() 函数在数据或图像加载完成之前开始执行，可能会导致程序出错或产生意外的行为。

解决方案：

p5.js 提供了 loadJSON() 函数的回调机制，允许我们在 JSON 数据加载完成后执行特定的代码块。 我们可以利用这个特性，在 loadJSON() 的回调函数中加载图像，并使用计数器来跟踪图像的加载进度。

代码示例：

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

let imgData; let numImagesLoaded = 0; let images = []; // 用于存储加载的图像  function preload() {   imgData = loadJSON("images.json", data => {     imgData = data; // 将加载的 JSON 数据赋值给 imgData     for (let filename of imgData.images) {       loadImage(filename, img => {         images.push(img); // 将加载的图像添加到数组中         numImagesLoaded += 1;       });     }   }); }  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, (height / (images.length + 1)) * (i + 1), 50, 50);     }   } else {     // 显示加载信息     text("Loading...", width / 2, height / 2);     textAlign(CENTER, CENTER);   } }

代码解释：

1. preload() 函数：

   • 使用 loadJSON() 函数加载 images.json 文件。
   • loadJSON() 的第二个参数是一个回调函数，该函数将在 JSON 数据加载完成后执行。
   • 在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图像。
   • loadImage() 函数也有一个回调函数，该函数将在图像加载完成后执行。
   • 在 loadImage() 的回调函数中，将加载的图像添加到 images 数组，并将 numImagesLoaded 计数器加 1。

2. setup() 函数：

   • 创建画布，并设置图像的对齐模式。

3. draw() 函数：

   • 首先检查 numImagesLoaded 是否等于 imgData.images.length。 如果是，则表示所有图像都已加载完成。
   • 如果所有图像都已加载完成，则遍历 images 数组，并在画布上绘制每个图像。
   • 如果图像尚未全部加载完成，则显示加载信息。

images.json 文件示例：

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

注意事项：

• 确保 images.json 文件和图像文件位于正确的位置。
• 可以根据需要修改代码来处理不同的图像大小和位置。
• 使用 preload() 函数可以确保在 setup() 函数开始执行之前，所有必要的资源都已加载完成。

总结：

通过利用 loadJSON() 函数的回调机制，我们可以轻松地在 p5.js 中预加载 JSON 数据，并根据 JSON 数据加载图像。 这种方法可以确保在 setup() 函数开始执行时，所有图像资源都已加载完成，从而避免程序出错或产生意外的行为。