从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

回答

相关问题