Fabricjs画布对象

Question

下面的代码出现了一些问题：

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 

当我用js文件编写这段代码时，它不起作用，但当我在浏览器控制台中运行它时，它工作得很好。它有什么问题？

Answer 1

这是因为，obj数组中没有对象(意味着它是空的)，因为在画布上没有任何其他对象，而且由于loadSVGFromURL方法是异步的，所以在正确加载并添加到画布之前，无法真正获得SVG对象。

要解决这个问题，只需在loadSVGFromURL.的回调函数中进行迭代。

以下是工作代码：

​

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>

​