從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加載後在畫布上無法渲染對象

回答

相關問題