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

【问题标题】：FabricJS canvas is "stuck" after adding elements添加元素后，FabricJS 画布“卡住”
【发布时间】：2012-06-21 11:41:26
【问题描述】：

我正在使用fabric.js 创建一个应用程序，并且遇到了非常奇怪的行为。我正在使用常规的fabric.Canvas（不是fabric.StaticCanvas）添加图像和文本实例，并且在添加后无法移动或调整这些项目的大小。我只添加了每种类型的几个。基本功能包含在与某个按钮上的单击事件相关联的回调中，但核心结构功能看起来像这样（简化，但就结构相关代码而言，几乎所有内容都相同）：

<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 开发面板（使用 F12 或 [Ctrl/CMD]+SHIFT+I 两次），画布恢复了功能，一切都恢复正常。我也发生了一些服务器端的事情（这只是我正在做的一个模拟示例），但我不知道如何进一步追踪到这种奇怪的行为。我正在使用最新的代码（从 github repo 构建）。想法？

【问题讨论】：

画布内部偏移可能没有正确更新。页面上的某些东西可能会改变尺寸/位置，使画布位于与初始化期间不同的位置。尝试在renderAll 调用之后或添加这些对象之后调用canvas.calcOffset()。
解决了！出于好奇-为什么不在renderAll() 内部调用它？请将其添加为答案，以便我将其标记出来 - 谢谢！
当然，添加了解释。很高兴它有帮助。

标签： canvas fabricjs

【解决方案1】：

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

在renderAll 中没有调用calcOffset 的原因是出于性能原因。 renderAll 是对整个画布的重绘。每当画布上的某些内容发生变化并且需要重新绘制画布时，都会发生这种情况。可以想象，它被频繁调用（有时每秒几十次），每次重绘时计算新的偏移量是非常浪费的。

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

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

【讨论】：

【解决方案2】：

我遇到了同样的问题，除了 kangax 解决方案，在非常极端的环境中，您可以在渲染发生的任何时候强制它重新计算偏移量。

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

【讨论】：