使用fabric.js將一系列圖像添加到畫布上

Question

我正在使用AJAX返回我想要在畫布上顯示的圖像列表。現在我想循環該集合並將圖像添加到我的畫布，這是行不通的。有人可以幫助這個嗎？以下是我的代碼（HTML中的頭一節）

<script> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "http://localhost:7466/DataService.asmx/GetPersons", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (response) { 

       var person; 
       person = response; 

      //  var canvas = document.getElementById('myCanvas'); 
       // var context = canvas.getContext('2d'); 

       var canvas = new fabric.Canvas('mycanvas'); 

       var i; 
       for (i = 0; i < person.d.length; i++) { 
        //alert(person.d[i].URL); 
        var image = new Image(); 
        image.src = person.d[i].URL; 

        var PosX = person.d[i].PosX; 
        var PosY = person.d[i].PosY; 

        fabric.Image.fromURL(image.src, function (oImg) { 
         oImg.set('Left',PosX).set('top',PosY); 
         canvas.add(oImg); 
        }); 
       } 
      } 
     }); 
    }); 

</script> 

Answer 1

您是否嘗試過增加？：

canvas.renderAll(); 

或者設置實例canvas元素？：

canvas.renderOnAddition = true; 

後以下