Question

我正在尝试将p5.js用于我的项目，但是我在查询如何在回调函数中调用setup()和draw()函数时遇到了问题。

我的代码看起来像这样：

const sentence = "was a French statesman and military leader who rose led several successful close"
let formats = ["jpg", "png", "gif", "jpeg"]
let images = []

const separate_words = (sentence) => sentence.split(" ")

const width = window.innerWidth

const imageExists = (url, callback) => {
  var img = new Image();
  img.src = url;
  img.onload = () => { callback(true); };
  img.onerror = () => { callback(false); };
}


const build_canvas = (array_of_img_urls) =>{
  function setup() {
    createCanvas(width, 300);
    images = array_of_img_urls.map(url => loadImage(url))
  }

  function draw() {
    images.forEach(img => {
      image(img, 0, 0, img.width/images.length, img.height/images.length);
    })
  }
}

let items_processed = 0

formats.forEach((format, indexFormat, arrayFormat)  => {
  separate_words(sentence).forEach((name, indexWord, arrayWords) => {
    imageExists(`./images/${name}.${format}`, (exists) => {
      if(exists)
        images.push(`./images/${name}.${format}`)

      items_processed++
      if(items_processed === (arrayWords.length * arrayFormat.length)){
        build_canvas(images)
      }
    })
  })
})

正如您所看到的，我正在创建一系列正常运行的图像路径，然后尝试使用5p.js库将这些图像显示在画布中。

我的问题是，有没有办法在回调中调用这些函数，或者我会在Node中做一些后端，一旦加载了，就插入数据？

Answer 1

您不应该自己致电setup()或draw()。您应该让P5.js自动为您调用它们。通常，这会在加载P5.js库时自然发生。

看起来您应该重构代码，这样您就不必调用setup()或draw()函数。这是一个粗略的想法：

var images = [];

function setup(){
    // load images
}

function draw(){
   // draw images
}

加载异步数据后，在回调中调用setup（）和draw（）

1 个答案: