ファブリックJS - ページのサムネイルを動的に変更

Question

マルチページ環境でFabricJSを使用しています。私たちのページリストビューは、キャンバス上で何かが変更された場合に生成されるサムネイルを使用する必要があります。今我々はいくつかのオブジェクト関連のイベントに耳を傾け、このような変化にサムネイルを更新している：

canvas.on('object:modified', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 

canvas.on('object:moving', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 
canvas.on('object:over', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 
canvas.on('object:out', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 
canvas.on('object:removed', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 
canvas.on('object:rotating', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 
canvas.on('object:scaling', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 
canvas.on('path:created', function (option) { 

    PagesControllerScope && PagesControllerScope.refreshSavePage(); 
}); 

をため可能なすべての変更を定義することなく、「一般的な」方法でこのような何かをachiveする方法はありますそれぞれのオブジェクトまたはキャンバス自体？

基本的には、キャンバス上で何かが変更されたり、itsef（サイズ、背景など）が変更されるたびに、「refreshSavePage（）」関数が呼び出されます。

私は「After：render」を使用したいと考えていましたが、これは何度も実行されるため、これはオプションではありません。それはどんなsomething is changedイベントはありません、単一のタイム親指

clearInterval(drawThumb); 
drawThumb = setTimeout(function() {  

// code for generate thumb  

clearInterval(drawThumb); 
}, 2000); 

Answer 1

は1つのグローバル変数「drawThumb」を作成し、内のコードの下に追加します。

ほとんどのプロパティをカバーするイベントは、 object:modifiedでもあります。statefullをtrueにします。

この場合、色の変更もキャッチします。

あなたができるより良いことは、debouceと_setの組み合わせを使用することです。

アプリケーションは実際にオブジェクト内のものを変更するにはobject.set('property', value)を使用する必要があります。多くの連続変化は何を解雇しないことを意味します。この時点で

あなたはあなたが良い（1秒、半秒）であると考え間隔でrefreshSavePageのデバウンスバージョンを含めるようにObject.setをオーバーライドすることができます

、後最後の変更、および選択したタイムアウト後に、関数はサムネイルを起動して更新します。

Answer 2

を生成：「レンダリング後」の方法