Question

我正在从json文件加载图像URL。除了显示实际图像之外，我一切正常。

这是一个简单的圆盘传送带。单击该单击，它将索引移至下一个索引。我想确保图像同时显示，显然，但是它不起作用（已引用图像，但不显示）。

有人知道我在做什么错吗？

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w/2;
var yPos = h/2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("image_search_result.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    imgList.push(imageData.items[i]['link']);
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax){
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w,h);
}

function draw() {
  background(0);
  image(loadImage(imgList[index]),xPos,yPos,w,h);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

Answer 1

我认为问题在于您试图在每次调用绘图功能时上传图像。在编写代码时，即使要上传的图像始终相同，p5.js也会从头开始重新加载它们。您应该在启动程序之前加载它们。正如我在下面所做的：

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w / 2;
var yPos = h / 2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("img.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    url = imageData.items[i]["link"];
    imgList.push(loadImage(url));
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax) {
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w, h);
}

function draw() {
  background(0);

  image(imgList[index], xPos, yPos, w, h);

  text(index, 20, 60);
  textSize(20);
  fill(255);
}

P.S。我编写代码时，@ George Profenza给出了相同的答案。抱歉

Answer 2

最后，我通过在loadImage中添加一个回调来使其工作。我不知道您可以执行此操作（在任何文档中都没有看到它），但是它的工作效率很高。

function draw() {
  nextImg = loadImage(imgList[index], imageLoaded);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

function imageLoaded() {
  background(0);
  image(nextImg,xPos,yPos,w,h);
  imageMode(CENTER);
}

在p5.js中使用loadImage的正确方法？

2 个答案: