javascript - 优化 Fabric.js 中的性能

Question

我正在编写一个小程序来制作有趣的背景纹理。它按照我想要的方式工作，除了一件事之外，它在计算机上非常慢/不稳定，在移动设备上甚至不显示动画。我想知道是否有更好的方法来实现我正在尝试的目标。

当圆圈尺寸较小或屏幕较大(创建许多对象)时，不稳定会变得尤其严重。

这是 fiddle :https://jsfiddle.net/cv6cgdja/12/

var canvas = new fabric.StaticCanvas('c')
var height = window.innerHeight
var width = window.innerWidth
var size = 35
var strokeWidth = 2
var strokeColor = '#c9db8e'
var fill = 'transparent'
var x = 0
var y = 0
var groups = []

canvas.setHeight(height)
canvas.setWidth(width)

while(y <= (height + (size*2))){
    while(x <= (width + (size*2))){
    var rotation = 0
    switch(Math.floor(Math.random()*4)){
        case 1: rotation = 90; break;
    }

    var first = new fabric.Circle({
      left: 0,
      top: 0,
      radius: size,
      startAngle: 0,
      endAngle: Math.PI/2,
      fill: fill,
      strokeWidth: strokeWidth,
      stroke: strokeColor
    });    
    var second = new fabric.Circle({
        left: size *2 ,
      top: size*2,
      radius: size,
      startAngle: Math.PI,
      endAngle: -Math.PI/2,
      fill: fill,
      strokeWidth: strokeWidth,
      stroke: strokeColor
    });

    var group = new fabric.Group([ first, second ], {
      left: x - size,
      top: y - size,
      originX: 'center',
      originY: 'center',
      angle : rotation
    });

    groups.push(group)
    x += size * 2
  }
  x = 0
    y += size * 2
}

function draw(){
    groups.forEach(function(g){
    canvas.add(g)
  })
}

draw()

setInterval(function(){
    groups.forEach(function(g){
    var rotation = g.get('angle')
    switch(Math.floor(Math.random()*32)){
        case 1: rotation = '+=90'; break;
        case 1: rotation = '-=90'; break;
    }
    g.animate('angle', rotation, {
      onChange: canvas.renderAll.bind(canvas),
      duration: 250,
      easing: fabric.util.ease.easeOut
    });
  })
}, 800)

Answer 1

给你!首先，startAngle、endAngle 的用法很好。

其次，主要问题是为每个动画触发 renderAll。如果你有 100 个组，canvas/js 无法在短时间内(16ms)容忍 100 个动画。

这种情况下的解决方案是让 .animate 使动画正常工作(因此只需更改 Angular )，并且在 onChange 函数中不执行任何操作。

然后启动一个具有相同持续时间的动画，这将使 onChange 函数成为 renderAll。

如果您使用 requestRenderAll ，并且在已请求另一个渲染时不执行任何操作，则此问题将在最新的测试版本中自动解决，但我建议始终采用有意识地了解正在发生的事情，并在必要时触发 renderAll。

var canvas = new fabric.StaticCanvas('c')
var height = window.innerHeight
var width = window.innerWidth
var size = 50
var strokeWidth = 2
var strokeColor = '#c9db8e'
var fill = 'transparent'
var x = 0
var y = 0
var groups = []

canvas.setHeight(height)
canvas.setWidth(width)
while(y <= (height + (size*2))){
	while(x <= (width + (size*2))){
  	var rotation = 0
    switch(Math.floor(Math.random()*4)){
    	case 1: rotation = 90; break;
    }
  
  	var first = new fabric.Circle({
      left: 0,
      top: 0,
      radius: size,
      startAngle: 0,
      endAngle: Math.PI/2,
      fill: fill,
      strokeWidth: strokeWidth,
      stroke: strokeColor
    });    
    var second = new fabric.Circle({
  		left: size *2 ,
      top: size*2,
      radius: size,
      startAngle: Math.PI,
      endAngle: -Math.PI/2,
      fill: fill,
      strokeWidth: strokeWidth,
      stroke: strokeColor
    });
    
    var group = new fabric.Group([ first, second ], {
      left: x - size,
      top: y - size,
      originX: 'center',
      originY: 'center',
      angle : rotation
    });
		
    groups.push(group)
  	x += size * 2
  }
  x = 0
	y += size * 2
}

function draw(){
  canvas.renderOnAddRemove = false;
	groups.forEach(function(g){
  	canvas.add(g)
  })
  canvas.renderOnAddRemove = true;
  canvas.renderAll();
}

draw();

setInterval(function(){
    groups.forEach(function(g){
    var rotation = g.get('angle')
    switch(Math.floor(Math.random()*32)){
        case 1: rotation = '+=90'; break;
        case 0: rotation = '-=90'; break;
    }
    g.animate('angle', rotation, {
      onChange: () => {},
      duration: 250,
      easing: fabric.util.ease.easeOut
    });
  })
  groups[0].animate('nothing', 1000, {
    duration: 250,
    onChange: canvas.renderAll.bind(canvas)
  });
}, 500)

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.js"></script>
<canvas id='c'></canvas>
<div>
Hi there
</div>