自定义动画组件中的高 CPU 使用率答案

【问题标题】：High CPU usage in custom animated component自定义动画组件中的高 CPU 使用率
【发布时间】：2017-04-05 00:32:24
【问题描述】：

我创建了自定义动画 FabricJS 组件：https://github.com/apache/openmeetings/blob/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js#L81

var canvas  = new fabric.Canvas('c');

var APointer = (function() {
    var pointer = {};
    pointer.user = '';
    pointer.create = function(canvas, o) {
        fabric.Image.fromURL('https://raw.githubusercontent.com/apache/openmeetings/trunk/openmeetings-web/src/main/webapp/css/images/pointer.png', function(img) {
            img.set({
                left:15
                , originX: 'right'
                , originY: 'top'
            });
            var circle1 = new fabric.Circle({
                radius: 20
                , stroke: '#ff6600'
                , strokeWidth: 2
                , fill: 'rgba(0,0,0,0)'
                , originX: 'center'
                , originY: 'center'
            });
            var circle2 = new fabric.Circle({
                radius: 6
                , stroke: '#ff6600'
                , strokeWidth: 2
                , fill: 'rgba(0,0,0,0)'
                , originX: 'center'
                , originY: 'center'
            });
            var text = new fabric.Text(o.user, {
                fontSize: 12
                , left: 10
                , originX: 'left'
                , originY: 'bottom'
            });
            var group = new fabric.Group([circle1, circle2, img, text], {
                left: o.x - 20
                , top: o.y - 20
            });

            canvas.add(group);
            group.uid = o.uid;
            group.loaded = !!o.loaded;

            var count = 3;
            function go(_cnt) {
                if (_cnt < 0) {
                    canvas.remove(group);
                }
                circle1.set({radius: 3});
                circle2.set({radius: 6});
                circle1.animate(
                    'radius', '20'
                    , {
                        onChange: canvas.renderAll.bind(canvas)
                        , duration: 1000
                        , onComplete: function() {go(_cnt - 1);}
                    });
                circle2.animate(
                    'radius', '20'
                    , {
                        onChange: canvas.renderAll.bind(canvas)
                        , duration: 1000
                    });
            }
            go(count);
        });
    }
    pointer.mouseUp = function(o) {
        var canvas = this;
        var ptr = canvas.getPointer(o.e);
        var obj = {
            type: 'pointer'
            , x: ptr.x
            , y: ptr.y
            , user: 'TEST TEXT'
        };
        pointer.create(canvas, obj);
    }
    return pointer;
})();

canvas.on('mouse:up', APointer.mouseUp);

它的动画应该是自动从画布中移除的 3 倍

一切都按预期工作，除了 requestAnimFrame 在自行删除组后正在使用 CPU。

也许你可以建议我做错了什么？

小提琴：http://jsfiddle.net/solomax666/x0zbz3sm/

添加多个指针后，Google Chrome 的 CPU 和 GPU 使用率仍然很高，从画布中删除所有对象后

操作系统：Ubuntu 16:10
浏览器：Google Chrome 最新版
FabricJS 版本：1.7.8

提前致谢！

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

问题在于缺少return' 声明这里：

if (_cnt < 0) {
    canvas.remove(group);
    return;
}

感谢 Andrea Bogazzi，@asturur

【讨论】：