fabricjs - 如何使在fabric js中对多个对象应用过滤器不那么滞后？

Question

我有大约 10 个可以应用过滤器的对象，以及一个过滤器引擎，它一个一个地遍历它们并将过滤器应用于每个对象。

import { fabric } from 'fabric'

const filters = {
  brightness: new fabric.Image.filters.Brightness(),
  premade: new fabric.Image.filters.ColorMatrix(),
}
const addFilter = (canvas, index, value = null) => {

  let pickedFilter
  let objects = canvas.getObjects()
  

  switch (index) {
    case 1:
      pickedFilter = sepia
      break;
    case 8:
      pickedFilter = brightness
      break;

    default:
      break;
  }
  
  objects.forEach((o) => {
    if (o.filters) {
      if (!o.filters[0]) {
        o.filters.push(filters.brightness)
        o.filters.push(filters.premade)
      }
      pickedFilter(o, value)
    }
  });
  canvas.renderAll();
}

export default addFilter

  function sepia(o){

    let value = [
      0.67,     0,     0,     0,     0,
      0,     0.54,     0,     0,     0,
      0,     0,     0.4,     0,     0,
      0,     0,     0,    1,     0
    ]
    delete filters.contrast.contrast
    delete filters.premade.matrix
    filters.premade.matrix = value
    o.applyFilters()
  
  }
function brightness(o, value) {
  
  value = (value / 100) / 2
    filters.brightness.brightness = value
    o.applyFilters()
  
}

最初，当对象在过滤器 [0] 处没有过滤器时，我继续推进过滤器。

稍后当用户像这个 gif那样移动滑块时，我会遍历每个对象，如果它可以有过滤器，我会继续更改过滤器的值，然后应用过滤器。如您所见，它有点滞后，我认为最大的问题是过滤器应用于多个对象。

在这个 gif 中，我去掉了除一个之外的所有对象，我觉得性能更好，但问题是我需要将过滤器应用于所有对象。

我尝试只在过滤器函数中运行代码一次（例如，我将值分配、删除先前值和值分配放在 sepia 函数内、循环外），但它没有改变任何东西。

我怎样才能提高性能并减少延迟？

标签： fabricjs