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

我可能在画布上有很多不同的形状对象，而我的商店并从db中将它们从画布中取回。从json加载后在画布上无法渲染对象

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); 
    });

添加图像，然后我必须使用旁再次看到在画布上的对象。

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

在渲染对象时发生了什么？我必须做什么才能获得没有按下renderAllID按钮的对象？

来源

2017-07-24 ivan golubar

？如果你是你应该添加到您的标签 –

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

所以，与其做...

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

你是你使用fabricjs应该做这样的事情......

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

或...

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

来源

2017-07-25 04:53:49

谢谢。有用。我正在解决这个问题10个小时。我应该问。 –

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

回答

相关问题