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);

我想將每個恆星圖像對象推入一個數組，因為我將修改它們的一些繁榮。 但是控制台告訴我[undefined，undefined，undefined，undefined，undefined，undefined]，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循環變量-因此它保留每個調用它的價值。