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

Question

我创建了自定义动画 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 次自动从 canvas

中删除自身

除了组被自行删除后 requestAnimFrame 正在使用 CPU 之外，一切都按预期进行。

也许你可以指出我做错了什么？

Fiddle: http://jsfiddle.net/solomax666/x0zbz3sm/

添加多个指针后 Google Chrome CPU 并且从 canvas

移除所有对象后 GPU 使用率仍然很高

OS: Ubuntu 16:10
浏览器：GoogleChrome最新
FabricJS 版本：1.7.8

提前致谢！

Answer 1

问题在于缺少 return' 语句这里：

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

感谢 Andrea Bogazzi，@asturur

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

High CPU usage in custom animated component

javascript

fabricjs