如何使用fabric js中的循环创建多个图标？

Question

I need to generate multiple icons at a certain interval from each other in Fabric.js. And this number depends on a loop I have made.

for (i = 0; i <= file.length(); i++){
miY = 206 + padding;
 fabric.Image.fromURL(placeholder, oImg => {
   oImg.set('left', 32).set('top', miY);
   rCanvas.add(oImg)
 });
padding +=35;
}

I tried using the above code ^ but when I run it, all my icons are generated on the same place. How can I fix this?

Answer 1

You can try something like this.

const rCanvas = new fabric.Canvas('canvas');
rCanvas.setWidth(document.body.clientWidth);
rCanvas.setHeight(document.body.clientHeight);

let placeholder = "https://dummyimage.com/50x50/000/fff";


async function run() {
    
    let padding = 0;
    let miY = 0;

    for (i = 0; i <= 5; i++){
        miY = 206 + padding;
        await addImage(miY)
        padding +=35;
    }
}

function addImage(miY) {
    return new Promise((resolve, reject) => {
        fabric.Image.fromURL(placeholder, oImg => {
           oImg.set('left', 32).set('top', miY);
           rCanvas.add(oImg)
           resolve();
        });
    });
}

run();

https://jsbin.com/titotigeza/edit?js,output