javascript - 如何减少 Fabric.js 基于递归的函数中的滞后

Question

我使用fabric.js为盒子制作动画，使其出现在屏幕上(canvas.add)，就像它们被缝合一样(参见图片)。

由于事情的本质，我用计时器实现了一个循环函数。随着它的运行，它开始变得越来越滞后。我想知道是否有办法减少延迟。它在宽屏幕尺寸下尤其糟糕(我能够得到〜1880px)，但不幸的是我正在使用的设计具有全 Angular 元素(而不仅仅是内容)。

我已经在下面添加了循环函数，但是如果没有其他函数，它就不太好，所以请查看 Fiddle。请原谅实现 - 我因嵌套组太多次而出现堆栈溢出(哈)错误，因此使用单个数组进行了 kludge-y 组/项目/计数器遍历。

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

我主要是一个潜伏者，所以如果我的问题和/或 fiddle 很糟糕，请告诉我，我会尽力改进。

Answer 1

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

Canvas 有一个属性 renderOnAddRemove，您可以将其设置为 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/