CPU使用率过高在自定义动画组件

我已创建自定义动画FabricJS组件：https://github.com/apache/openmeetings/blob/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js#L81 CPU使用率过高在自定义动画组件

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/

添加多个指针谷歌浏览器的CPU和GPU使用率仍然很高，毕竟对象从画布除去后

操作系统：Ubuntu的16:10
浏览器：谷歌浏览器最新
FabricJS版本：1.7.8

比ks提前！

来源

2017-04-01 Maxim Solodovnik

的问题是缺少的return'声明这里：

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

现金去安德烈Bogazzi，@asturur

来源

2017-04-04 16:32:24

CPU使用率过高在自定义动画组件

回答

相关问题