使用 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);
  }
}

代码解释：

Find JSON Path Online

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

30

查看详情

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() 函数开始执行时，所有图像资源都已加载完成，从而避免程序出错或产生意外的行为。

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