移動、スケーリング、回転中に選択したオブジェクトのみをレンダリングする

Question

現在、私は、より大きなキャンバス領域と何百ものオブジェクト（テキスト、画像、図形、クリップアートなど）を必要とする「フォトコラージュメーカー」プロジェクトに取り組んでいます。問題は、それらのオブジェクトを移動、スケーリング、回転させることです.Fabric.jsはすべてのオブジェクトをレンダリングするので、オブジェクトが非常に遅くなります。選択したオブジェクトだけをファブリックキャンバスの上にレンダリングしたい。私はrenderOnAddition、renderTopもテストしましたが、私が望むものではありません。

私は次のことをしたい：

canvas.on('object:moving', function(e) { 
    var activeObject = e.target; 
    //canvas.renderAll(); 
    canvas.renderObjects(activeObject); 
}); 

今の代わりcanvas.renderAll()、私はcanvas.renderObjects(activeObject)のような方法が必要です。 Fabric.jsでこの機能を実現するにはどうすればよいですか？ここで

は私のプロジェクトです：Edit Photos For Free

Answer 1

あなたの最善の策は、主なものの前に、第二のキャンバスを持つことです、あなたは/スケール/現在の項目（複数可）を回転移動するには。

これは、選択したオブジェクトをファブリックキャンバスの上にレンダリングする必要があることを示しています。

move/scale/rotateが終了すると、元のキャンバス要素を復元して変更を適用し、完全に再描画できるようになります。