Fabricjsキャンバスは

Question

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ファイルにこのコードを書くが、私は、ブラウザのコンソールでそれを実行すると、それは完璧に動作

。どうしたの？

Answer 1

配列を使用して、キャンバス上の任意の他のオブジェクトが存在しないとして、それを反復し、loadSVGFromURL方法以来されている場合、（それをさん空を意味する）ことに何のオブジェクトを持っていないobj、これはあります非同期なので、のが正しく読み込まれてキャンバスに追加されるまで、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>