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

Question

我正在使用 fabric.js 制作方框动画，使其出现 (canvas.add) 在屏幕上，就像它们被缝合在屏幕上一样（见图）。

由于事情的性质，我已经实现了一个带有计时器的循环功能。随着它的运行，它开始滞后的次数越多。我想知道是否有办法减少延迟。它在宽屏尺寸下尤其糟糕（我能够得到 ~1880px）但不幸的是我正在使用的设计有这个元素全宽（不仅仅是内容）。

我在下面包含了循环函数，但如果没有其他函数就不太好，所以请查看 Fiddle。请原谅这个实现 - 我从嵌套组中得到堆栈溢出 (hah) 错误太多次，因此 kludge-y group/item/counter 遍历单个数组。

-- Fiddle HERE --

我怀疑这可能是屏幕上呈现的对象的绝对容量，因为延迟明显减少运行一次只有一行（而不是全部 3 行），但我只想擦除穿过一次并从那里继续动画（滑动库存图像、文本、CTA 等）。有人可以提出更好的解决方案吗？在较大的屏幕尺寸下最明显 - 我在 Fiddle 中留下了说明进行测试。

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);
    }
}

我基本上是个潜伏者，所以如果我的问题 and/or Fiddle 很糟糕，请告诉我，我会努力改进。

Answer 1

当前的滞后是因为每次将对象添加到 canvas 时，都会重新渲染以显示该对象。

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

以下是 Documentation 对此的评价属性：

Indicates whether fabric.Collection.add, fabric.Collection.insertAt and fabric.Collection.remove should also re-render canvas. Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once (followed by a manual rendering after addition/deletion)

我已经编辑了你的fiddle。您可以在这里查看：http://jsfiddle.net/4srj2sc8/3/

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

How to reduce lag in fabric.js recursion-based function

javascript

recursion

jquery

lag

fabricjs