Fabric Js画布对象迭代答案

【问题标题】：Fabricjs canvas objects iterarionFabric Js画布对象迭代
【发布时间】：2017-07-29 00:39:26
【问题描述】：

我在下面的代码中遇到了一些问题：

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 文件中编写此代码时，它不起作用，但是当我在浏览器控制台中运行它时，它可以完美运行。它有什么问题？

【问题讨论】：

您是否尝试将所有 svg 对象颜色设置为红色？
@ℊαα这只是一个演示。主要是当我用这个打开页面时它不能正常工作。
@ℊααnd 颜色没有变化。

标签： javascript fabricjs

【解决方案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>

【讨论】：