javascript - Fabricjs Canvas 对象迭代

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 数组中没有对象(意味着它为空)，当您对其进行迭代时，因为 Canvas 上没有任何其他对象，并且 loadSVGFromURL 方法是异步的，因此在正确加载 SVG 对象之前，您无法真正获取 SVG 对象并添加到 Canvas 中。

要解决此问题，只需在 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>