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次自动从画布中删除

所有内容都按预期工作，除了在{group>被自行删除后requestAnimFrame使用CPU这一事实。

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

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

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

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

提前致谢！

Answer 1

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

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

致Andrea Bogazzi，@ aturur

自定义动画组件

1 个答案: