使用 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); }}
代码解释：
preload() 函数：
使用 loadJSON() 函数加载 images.json 文件。loadJSON() 的第二个参数是一个回调函数，该函数将在 JSON 数据加载完成后执行。在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图像。loadImage() 函数也有一个回调函数，该函数将在图像加载完成后执行。在 loadImage() 的回调函数中，将加载的图像添加到 images 数组，并将 numImagesLoaded 计数器加 1。
setup() 函数：
创建画布，并设置图像的对齐模式。
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 中的图像数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514277.html
微信扫一扫 
支付宝扫一扫 
