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 +我两次），画布将重新获得功能，一切都会再次运作。我也有一些服务器端的东西发生（这只是我正在做的模拟样本），但我不知道如何进一步追溯到这种奇怪的行为。我正在使用最新的代码（从github repo构建）。想法？

Answer 1

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

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

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

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

Answer 2

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

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

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

2 个答案: