如何减少fabric.js基于递归的函数的滞后

Question

我使用fabric.js动画框在屏幕上显示（canvas.add），好像它们被缝合一样（见图）。

由于该事物的性质，我已经实现了带定时器的重复功能。随着它的运行，它越开始滞后。我想知道是否有办法减少滞后。在宽屏幕尺寸下它特别糟糕（我能够达到~1880px）但不幸的是我正在使用的设计将这个元素全宽（不仅仅是内容）。

我已经包含了下面的重复功能，但如果没有其他功能则不太好，所以请查看小提琴。请原谅实现 - 我从嵌套组中得到堆栈溢出（hah）错误太多次，因此kludge-y group / item / counter遍历一个数组。

- 小提琴HERE -

我怀疑它可能是屏幕上渲染对象的绝对容量，因为一次只运行一行（而不是全部3行）会显着减少延迟，但我只想擦拭一次然后继续从那里的动画（滑动股票图像，文字，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);
    }
}

我主要是潜伏者，所以如果我的问题和/或小提琴很糟糕，请告诉我，我会尝试改进。

Answer 1

当前延迟是因为每次向画布添加对象时，都会重新渲染它以显示该对象。

有一个属性renderOnAddRemove，您可以为Canvas设置为false。这将禁用每个canvas.add()后发生的自动重新呈现。然后，您可以在for循环后调用canvas.renderAll()，一旦添加了所有对象。

以下是Documentation对此属性的说法：

  

指示fabric.Collection.add，fabric.Collection.insertAt和fabric.Collection.remove是否还应重新渲染画布。在一次向画布添加/从画布中删除大量对象时，禁用此选项可以提高性能（在添加/删除后进行手动渲染）

我编辑了你的小提琴。您可以在此处查看：http://jsfiddle.net/4srj2sc8/3/