添加元素后FabricJS画布“卡住”

我使用fabric.js创建应用程序，并且遇到了非常奇怪的行为。我使用常规的fabric.Canvas（不是fabric.StaticCanvas）添加图像和文本实例，并且无法在添加后移动或调整这些项目的大小。我只添加了每种类型的几个。其基本功能是包裹在拴在一些按钮点击事件的回调，但核心面料的功能看起来像这样（简化，但几乎所有的东西是一样的，只要面料相关的代码）：添加元素后FabricJS画布“卡住”

<canvas id="myCanvas" height=600 width=800></canvas> 
<input id="addStuff" type="button" value="Add!" /> 
.... 
var canvas = new fabric.Canvas('myCanvas'); 
canvas.renderOnAddition = true; 

$(function(){ 
    $('#addStuff').on('click', function(e) { 

     var text = new fabric.Text("Hello, world", { 
     top  : 100, 
     left  : 100, 
     fontSize : 12, 
     fontFamily : 'Delicious_500' 
     }); 
     text.hasControls = false; 

     canvas.add(text); 

     fabric.Image.fromURL('./img/pic.png', function(img) { 
     var imgX = img.set({ 
      top: 200, 
      left: 100, 
     }); 

     canvas.add(imgX); 
     }); 

     canvas.renderAll(); 
    }); 
});

上面的代码很好地呈现了元素，但是它们不能被调整大小或移动，并且是静态的。 奇怪的是，如果我打开和关闭我的chrome dev-panel（使用F12或[Ctrl/CMD] + SHIFT + I两次），画布重新获得功能，并且所有内容都可以再次运行。我也有一些服务器端的东西在发生（这只是我正在做的一个模拟样本），但我不知道如何进一步追踪这种奇怪的行为。我正在使用最新的代码（由github repo构建）。思考？

来源

2012-06-19 sa125

画布内部偏移可能没有正确更新。页面上的某些内容可能会更改尺寸/位置，使画布位于与初始化期间不同的位置。尝试在'renderAll'调用之后或在添加这些对象之后调用'canvas.calcOffset（）'。 – kangax

解决了！出于好奇 - 为什么不在'renderAll（）'里面调用？请添加它作为答案，这样我就可以标记出来 - 谢谢！ – sa125

当然，补充说明。很高兴帮助。 – kangax

画布内部偏移可能没有正确更新。页面上的某些内容可能会更改尺寸/位置，使画布位于与初始化期间不同的位置。尝试在renderAll()调用后或在添加这些对象之后尝试拨打canvas.calcOffset()。

原因calcOffset未被调用renderAll是出于性能原因。 renderAll是整个画布的重绘。它每次都会在画布上发生变化并且画布需要重新绘制时发生。正如你可以想象的那样，它经常被调用（有时每秒几十次），并且每次重绘发生时计算新的偏移量都是非常浪费的。

还要考虑到在大多数情况下，画布位置在整个页面生命期间都不会改变。这很可能发生很少。主要在页面加载期间。

在高度动态的环境中 - 画布经常改变位置 - 您可以通过明确地调用calcOffset()来解决偏移“问题”。

来源

2012-06-24 17:46:11 kangax

我有同样的问题，在kangax解决方案的基础上，在极端极端的环境中，您可以强制它在发生渲染时随时重新计算偏移量。

canvas.on('after:render', function(){ this.calcOffset(); });

来源

2014-08-09 14:45:13

添加元素后FabricJS画布“卡住”

回答

相关问题