添加元素后,FabricJS画布"卡住"

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(); });