6

を使用してアプリケーションを作成していますfabric.jsが、非常に奇妙な動作が発生しています。fabric.Canvas通常の(not )を使用して、画像とテキストの両方のインスタンスを追加していますが、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 を 2 回使用)、キャンバスが機能を回復し、すべてが再び機能します。私もサーバー側でいくつかのことを行っています (これは私が行っていることの単なるサンプルです) が、これをこの奇妙な動作にさらに追跡する方法がわかりません。私は最新のコード（githubリポジトリから構築）を使用しています。考え？

4

2 に答える 2

22

キャンバスの内部オフセットが正しく更新されていない可能性があります。ページ上の何かがサイズ/位置を変更し、キャンバスが初期化中とは異なる場所に配置される可能性があります。canvas.calcOffset()呼び出し後renderAll()、またはそれらのオブジェクトを追加した後に呼び出してみてください。

calcOffset呼び出されない理由renderAllは、パフォーマンス上の理由によるものです。renderAllキャンバス全体の再描画です。キャンバス上で何かが変更され、キャンバスを再描画する必要があるたびに発生します。ご想像のとおり、非常に頻繁に (1 秒間に数十回) 呼び出されるため、再描画が発生するたびに新しいオフセットを計算するのはかなり無駄です。

また、ほとんどの場合、キャンバスの位置はページの存続期間を通じて変更されないことも考慮してください。それはおそらくかなりまれに起こります。主にページの読み込み中。

キャンバスの位置が頻繁に変わる非常に動的な環境では、 を明示的に呼び出すことでオフセットの「問題」を解決できますcalcOffset()。

于 2012-06-24T17:46:11.707 に答える
8

kangax ソリューションに加えて、非常に極端な環境では、同じ問題が発生しました。イベントを使用して、レンダリングが発生するたびにオフセットを強制的に再計算することができます。

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

于 2014-08-09T14:45:13.587 に答える