6

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

4

2 回答 2

22

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

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

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

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

于 2012-06-24T17:46:11.707 回答
8

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

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

于 2014-08-09T14:45:13.587 回答