FabricJS画布被“卡住”后添加元素 [英] FabricJS canvas is "stuck" after adding elements

问题描述

我正在使用 fabric.js 创建应用程序，并遇到真正奇怪的行为。我使用常规 fabric.Canvas （不是 fabric.StaticCanvas ）添加图片和文字实例，添加后无法移动或调整这些项目的大小。我只添加了几种类型。基本功能被包装在一个回调中，绑定到一些按钮上的点击事件，但核心结构功能看起来像这样（简化，但几乎一切都与面料相关的代码相同）：

I'm creating an application using fabric.js, and experiencing really strange behavior. I'm adding both images and text instances, using the regular fabric.Canvas (not fabric.StaticCanvas), and am unable to move or resize these items after addition. I've only added a couple of each type. The basic functionality is wrapped in a callback tied to a click event on some button, but the core fabric functionality looks something like this (simplified, but almost everything is the same as far as fabric related code):

<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 dev面板（使用F12或[Ctrl / CMD] + SHIFT + I两次），画布恢复功能，一切正常工作。我有一些服务器端的东西发生了（这只是一个模拟的样本，我在做什么），但我不知道如何进一步追溯到这种奇怪的行为。我使用最新的代码（从github repo构建）。

The above code renders the elements well, but they cannot be resized or moved around, and act static. The strange thing is that if I open and close my chrome dev-panel (using F12 or [Ctrl/CMD]+SHIFT+I twice), the canvas regains functionality and everything works again. I have some serverside stuff happening as well (this is only a mock sample of what I'm doing), but I have no idea how to further trace this down to this odd behavior. I'm using the very latest code (built from github repo). Thoughts?

推荐答案

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

It's possible that canvas internal offset is not updated properly. Something on the page could change dimensions/position, making canvas positioned at a different location than the one it was during initialization. Try calling canvas.calcOffset() after renderAll() call, or after adding those objects.

calcOffset 在 renderAll 中未调用的原因是出于性能原因。 renderAll 是整个画布的重绘。它发生每次在画布上的东西变化和画布需要重绘。你可以想象，它被频繁调用（每秒有几十次），并且每次重绘时计算新的偏移是非常浪费的。

The reason calcOffset is not called in renderAll is for performance reasons. renderAll is a redraw of an entire canvas. It happens every time something changes on canvas and canvas needs to be redrawn. As you can imagine, it gets called quite often (sometimes dozens of times per second), and it would be pretty wasteful to calculate new offset every time redraw happens.

也在大多数情况下，画布的位置不会改变整个页面的生活。它可能发生很少。

Consider also that in most cases canvas position does not change throughout page life. It probably happens pretty rarely. Mainly during page load.

在高度动态环境中 - 画布经常变化的位置 - 您可以通过显式调用 calcOffset ）。

In highly-dynamic environment — where canvas changes position often — you can solve offset "problem" by explicitly calling calcOffset().

这篇关于FabricJS画布被“卡住”后添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！