2013-01-10 4 views
-1

AJAX를 사용하여 캔버스에 원하는 이미지 목록을 반환합니다. 이제 그 컬렉션을 반복하고 캔버스에 이미지를 추가하고 싶습니다. 작동하지 않습니다. 누군가가 도와 주실 수 있습니까? 다음은fabric.js로 캔버스에 일련의 이미지 추가

<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> 

답변

1

당신이 당신의 캔버스 요소?

canvas.renderOnAddition = true; 
를 인스턴스화 한 후 다음 설정,

canvas.renderAll(); 

? : 추가 또는 시도 되세요 (html로 헤드 섹션에서) 내 코드입니다