使用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; 

后以下