從JSON異步渲染Fabric.js

我在fabric.js中有一個「雙面」畫布。它們都是從JSON字符串加載的。我有一個函數來適應畫布的窗口大小，這也調整了每個對象的大小。問題是當一個JSON中有一個imageblob時，它需要更多時間來加載。所以當我打電話給我的功能時，我最終會看到一個畫布上的所有對象，而另一個畫布上卻沒有。我已經完成了setTimeout，但這不是最好的解決方案。如何在沒有settimeout的情況下在同一時間調整所有內容？這裏是我的功能從JSON異步渲染Fabric.js

function fitWindow(){ 
     var windowWidth = $("#wrapper").innerWidth(); 
     var originalWidth = canvas.getWidth(); 
     var originalHeight = canvas.getHeight(); 

     var newWidth = windowWidth-30; 
     var newHeight = (originalHeight/originalWidth)* newWidth; 

     canvas.setWidth(newWidth); 
     canvas.setHeight(newHeight); 

     var myScale = originalWidth/newWidth; 

     var objects = canvas.getObjects(); 

     for (var i in objects) { 
      var scaleX = objects[i].get('scaleX'); 
      var scaleY = objects[i].get('scaleY'); 
      var left = objects[i].get('left'); 
      var top = objects[i].get('top'); 

      var tempScaleX = scaleX * (1/myScale); 
      var tempScaleY = scaleY * (1/myScale); 
      var tempLeft = left * (1/myScale); 
      var tempTop = top * (1/myScale); 

      objects[i].set('scaleX',tempScaleX); 
      objects[i].set('scaleY',tempScaleY); 
      objects[i].set('left',tempLeft); 
      objects[i].set('top',tempTop); 

      objects[i].setCoords(); 
     } 

     canvas.renderAll(); 

     var ojS = canvas.toObject(['name']); 
     var savedCanvas = JSON.stringify(ojS); 

     canvas.clear(); 
     canvas.loadFromJSON(canvas2, canvas.renderAll.bind(canvas)); 
     setTimeout(function(){ 

      var objects2 = canvas.getObjects(); 
      for (var k in objects2) { 
       var scaleX2 = objects2[k].get('scaleX'); 
       var scaleY2 = objects2[k].get('scaleY'); 
       var left2 = objects2[k].get('left'); 
       var top2 = objects2[k].get('top'); 

       var tempScaleX2 = scaleX2 * (1/myScale); 
       var tempScaleY2 = scaleY2 * (1/myScale); 
       var tempLeft2 = left2 * (1/myScale); 
       var tempTop2 = top2 * (1/myScale); 

       objects2[k].set('scaleX',tempScaleX2); 
       objects2[k].set('scaleY',tempScaleY2); 
       objects2[k].set('left',tempLeft2); 
       objects2[k].set('top',tempTop2); 

       objects2[k].setCoords(); 
      } 
      canvas.renderAll(); 

      var ojS2 = canvas.toObject(['name']); 
      canvas2 = JSON.stringify(ojS2); 

      canvas.clear(); 
      canvas.loadFromJSON(savedCanvas, canvas.renderAll.bind(canvas)); 

      canvas.renderAll(); 
     },100); 
    }

來源

2016-11-22 pape04

好吧，我想我找到了解決方案。我結合功能的JSON負載的回調，像這樣：

canvas.loadFromJSON(canvas2, function() { 

       scaleObjects(scale,canvas.getObjects()); 
       canvas2 = savedCanvasJSON(canvas.toObject(['name'])); 
       canvas.clear(); 
       canvas.loadFromJSON(savedCanvas, canvas.renderAll.bind(canvas)); 
      });

它正在按預期

來源

2016-11-23 10:12:34 pape04

從JSON異步渲染Fabric.js

回答

相關問題