web-dev-qa-db-ja.com

キャンバスをリセットし、Fabric.jsでJSONをリロードします

複数のビューを持つことができる必要があることを除いて、私は流し台の例のようなものを構築しています。

http://fabricjs.com/kitchensink

名刺：表と裏

編集中、JSONを定期的に保存します。

（AngularJSを使用しているため）ページをリロードせずにバックを編集したい場合、現在のキャンバスをワイプして新しいJSONをリロードするにはどうすればよいですか？

現在JSONを読み込んでいます。[ビューの変更]をクリックし、canvas.clearContext()を実行して、新しいJSONを再読み込みします。これは私が期待したようには機能していません。

更新

このキャンバスを管理するためにディレクティブを使用しています。 JSONが利用可能になったときにディレクティブをインスタンス化していて、それを更新しようとすると、何らかの理由で機能しませんでした。

私はそれを削除し、ディレクティブがそれ自体を空にして開始するようにしました。そして今、私はサービスを介してJsonをロードするだけです。わーい！

canvashtml5-canvasfabricjs
11
Michael J. Calkins

通常、canvas.loadFromJSON()は、新しいオブジェクトをロードする前にキャンバス全体をクリアします。それ以外の場合は、canvas.clear();を実行できます。

http://fabricjs.com/docs/fabric.Canvas.html#clear

JSONをどのようにロードしますか？

このようなものが機能するはずです：

_var json = canvas.toJSON();

canvas.clear();

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
_

JSONを読み込んだ後、canvas.renderAll()を呼び出すことが重要です。 canvas.loadFromJSON(json, callback)の2番目のパラメーターでは、すべてのオブジェクトがロード/追加された後に呼び出されるcllback関数を定義できます。

http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON

25
Kienz

Reactで実行しているときに同様の問題が発生し、canvas.clear()を使用するだけでは不十分でした。理論的には削除されたオブジェクトですが、シーンに何かが残っていて、新しくロードされたオブジェクトをいじっていた可能性があります。それらの削除されたオブジェクトに添付されたイベント...とにかく今私はシーンをリロードするときにこのキャンバスをクリアするためにcanvas.dispose()を使用していて、問題はなくなりました。

あなたは ドキュメントをチェックしてください することができます。

1
Picard