javascript - fabric.js - 如何将织物图像对象推送到数组中？

Question

    //STARS
    var stars_arr = new Array(6);
    for(a=0;a<6;a++){
        fabric.Image.fromURL(
            './img/util/star.png',
            function(output){
                canvas.add(output);
                stars_arr[a] = output;
            },
            {
                left:75+(a*29),
                top:30,
                width:23,
                height:25,
                selectable:false
            }
        ); 
    }
    console.log(stars_arr);

我想把我的每一个星图对象都推到一个数组中，因为我会修改它们的一些特性。 但是控制台告诉我 [未定义，未定义，未定义，未定义，未定义，未定义] 和 stars_arr.length = 0

Answer 1

您可能早就想通了 - 但以防其他人偶然发现:这里的问题是由于 fabric.Image.fromURL 是异步的。在执行任何回调函数之前，循环的所有迭代都已完成。因此，当它们最终被执行时，您的 a 变量已经是 6，并且在所有 6 次迭代中都保持为 6。

解决此问题的最简单方法是将您的调用封装在一个从循环调用的函数中。如:

//STARS
var stars_arr = new Array(6);
for (a = 0; a < 6; a++)
  addStar(a);

function addStar(a) {
  fabric.Image.fromURL(
    './img/util/star.png',
    function(output) {
      canvas.add(output);
      stars_arr[a] = output;
    }, {
      left: 75 + (a * 29),
      top: 30,
      width: 23,
      height: 25,
      selectable: false
    });
}

这样做时，回调中对 a 的引用是指传递给函数的 a，而不是 a 循环变量 - 并且所以它保留了每次调用的值(value)。