FabricJS画布对象迭代

Question

I got some problems with code below :

var canvas = new fabric.Canvas('c');
canvas.selection = false;
fabric.loadSVGFromURL('./svg/1.svg',
    function (objects) {
        canvas.add.apply(canvas, objects);
        canvas.renderAll();
    }); -- this part is working
obj = canvas.getObjects();
obj.forEach(function (item, i) {
    console.log('plz work');
    item.setColor('red');
    item.set('selectable', false);
    canvas.renderAll();
}); - this isn't working 

When i write this code in js file it's not working, but when i run it in browser console it works perfectly. What's wrong with it?

Answer 1

This is because, obj array has no objects in it (meaning it­ 's empty), when you are iterating over it, as there isn't any other objects on the canvas, and since loadSVGFromURL method is asynchronous, you can't really get hold of the SVG objects until it­ 's properly loaded and added to the canvas.

To resolve this, simply do the iteration inside the callback function of loadSVGFromURL .

Here is the working code :

 var canvas = new fabric.Canvas('c'); canvas.selection = false; fabric.loadSVGFromURL('https://istack.000webhostapp.com/1tf.svg', function(objects) { canvas.add.apply(canvas, objects); canvas.renderAll(); //do the iteration here obj = canvas.getObjects(); obj.forEach(function(item, i) { console.log('plz work'); item.setColor('red'); item.set('selectable', false); canvas.renderAll(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script> <canvas id="c" width="200" height="200"></canvas>