2012-06-19 55 views
6

我使用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构建)。思考?

+2

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

+0

解决了!出于好奇 - 为什么不在'renderAll()'里面调用?请添加它作为答案,这样我就可以标记出来 - 谢谢! – sa125

+1

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

回答

22

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

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

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

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

7

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

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