如何減少基於fabric.js遞歸的函數中的延遲

Question

我正在使用fabric.js對框進行動畫處理，使其在屏幕上顯示（canvas.add），就好像它們在縫合時一樣（參見圖片）。

由於事情的性質，我實現了帶有計時器的循環功能。 當它運行時，它開始滯后的越多。 我想知道是否有減少滯后的方法。 在寬屏幕尺寸（我能夠獲得〜1880px）的情況下尤其糟糕，但是不幸的是，我正在使用的設計具有此元素的全角（不僅僅是內容）。

我已經在下面包括了循環功能，但是如果沒有其余功能，它的效果就不好了，所以請查看Fiddle。 請原諒實現-嵌套組太多次導致堆棧溢出（hah）錯誤，因此僅用一個數組遍歷了kludge-y組/項目/計數器。

-在這里提琴 -

我懷疑這可能是在屏幕上渲染的對象的絕對容量，因為通過一次只運行一行（而不是全部三行）可以顯着減少延遲，但是我只想擦除一次並繼續播放動畫在那里（在圖片，文字，CTA等中滑動）。 有人可以提出更好的解決方案嗎？ 在較大的屏幕尺寸上最明顯-我在小提琴中留下了說明進行測試。

function embroider(obj,i){

    var iOffset = Math.floor(i/perLine);

    for(whichZigzag=0;whichZigzag<numZigzags;whichZigzag++){
        var whichGroup = (iOffset+(whichZigzag*numLines));
        var whichStitch = (i-(iOffset*perLine));
        for(four=0;four<4;four++, whichStitch++){
            canvas.add(obj[whichGroup].item(whichStitch));
        }
    }

    i+=4;

    if(i<perZigzag){
        setTimeout(function(){ // dont trigger immediately
            embroider(obj,i);
        },100);
    }
}

我主要是一個潛伏者，所以請讓我知道我的問題和/或Fiddle是否很爛，我會嘗試改善。

Answer 1

當前的滯后是因為每次將對象添加到畫布時，都會重新渲染該對象以顯示該對象。

有一個屬性renderOnAddRemove ，可以將Canvas設置為false 。 這將禁用在每個canvas.add()之后發生的自動重新渲染。 一旦添加了所有對象，便可以在for循環之后調用canvas.renderAll() 。

以下是文檔中有關此屬性的內容：

指示fabric.Collection.add，fabric.Collection.insertAt和fabric.Collection.remove是否也應重新渲染畫布。 一次在畫布中添加/刪除大量對象時，禁用此選項可以極大地提高性能（隨后在添加/刪除之后進行手動渲染）

我已經編輯了你的小提琴。 您可以在這里檢查： http : //jsfiddle.net/4srj2sc8/3/