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

回答

相關問題