从json加载后无法在画布上渲染对象答案

【问题标题】：Cant render object on canvas after loading from json从json加载后无法在画布上渲染对象
【发布时间】：2017-12-30 15:12:08
【问题描述】：

我的画布上可能有许多不同形状的对象，我的商店将它们放回画布上从分贝。

function getJsonF(){ ////////////////////////////////////                              JSgetjson
   var fromSelectProject=document.getElementById("selectProject").value; 
$.ajax({
  method:"POST",
  url: '/wp-content/themes/mypage/PgetJson.php',
  data:  {
    "getCanvas":1,
    "hProject":fromSelectProject
  },
  datatype: "text",
  success: function(strdate){

     canvas.loadFromJSON( strdate);
     canvas.renderAll();

     }
 });
}

但是一旦我在画布上添加图像

 document.getElementById('imgLoader').addEventListener("change", function (e) {
      var file = e.target.files[0];
      var reader = new FileReader();
      reader.onload = function (f) {
        var data = f.target.result;     
        fabric.Image.fromURL(data, function (img) {
        var oImg = img.set({id: "oImgID",left: 0, top: 0, angle: 00,width:canvas.width, height:canvas.height,}).scale(1); 
        canvas.add(oImg).renderAll();
        oImg.set('selectable', false);
        var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
        });
      };
     reader.readAsDataURL(file);
    });

然后我必须使用 next 再次查看画布上的对象。

function renderAllF(){
canvas.renderAll();
}
document.getElementById("renderAllID").onclick= renderAllF;

这里的对象渲染发生了什么？我必须做什么才能在不按下 renderAllID 按钮的情况下获取对象？

【问题讨论】：

你在用fabricjs吗？如果你是，你应该把它添加到你的标签中

标签： javascript json ajax fabricjs

【解决方案1】：

由于loadFromJSON() 方法是异步的，您必须在其回调函数中渲染画布。

所以，与其做...

...
canvas.loadFromJSON(strdate);
canvas.renderAll();
...

你应该做类似...

...
canvas.loadFromJSON(strdate, function() {
   canvas.renderAll();
});
...

或者...

...
canvas.loadFromJSON(strdate, canvas.renderAll.bind(canvas));
...

【讨论】：

谢谢。有用。我在这个问题上工作了 10 个小时。我应该先问一下。