Fabricjs画布对象iterarion

我得到了一些问题，下面的代码：Fabricjs画布对象iterarion

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文件它不工作，但是当我在浏览器控制台运行它，它完美的作品。它出什么问题了？

来源

2017-07-28 Shiroe

你试图将所有SVG对象颜色为红色？ –

@ℊα和它只是一个演示。主要的是，当我用这个打开页面时，这不能正常工作。 – Shiroe

@颜色不变。 – Shiroe

这是因为，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>

来源

2017-07-28 16:34:09

Fabricjs画布对象iterarion

回答

相关问题