canvas - 添加元素后 FabricJS Canvas 为 "stuck"

Question

我正在使用 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 两次)， Canvas 恢复了功能，一切都恢复正常 .我也发生了一些服务器端的事情(这只是我正在做的一个模拟示例)，但我不知道如何进一步追踪到这种奇怪的行为。我正在使用最新的代码(从 gi​​thub repo 构建)。想法？

Answer 1

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

原因calcOffset未在 renderAll 中调用是出于性能原因。 renderAll是整个 Canvas 的重绘。每当 Canvas 上的某些内容发生变化并且需要重绘 Canvas 时，都会发生这种情况。正如你可以想象的那样，它经常被调用(有时每秒几十次)，每次重绘时计算新的偏移量是非常浪费的。

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

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