fabricjs - 是否可以在 Fabric.js 中为过滤器设置动画？

Question

是否可以在 Fabric.js 中为图像过滤器设置动画？例如“像素化”过滤器。

Answer 1

我以与演示相同的方式解决了它。不幸的是，过滤器不能被动画化——它们需要太多的处理时间。

这是我的代码：

image = ... //Image, where the filter should be applied

var filter = new fabric.Image.filters.RemoveWhite({
    threshold: 0,
    distance:  140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));

animate(image,1, 400);   //Start the Animation

function animate(image,value, stop){
    value += ((stop-value)*0.02);    //Change the threshold-value

    if (image.filters[0]) {   
        image.filters[0]['threshold'] = value;
        console.log(value);
        image.applyFilters(canvas.renderAll.bind(canvas));  //Start creating the new image

        if(value<stop-100){
            setTimeout(function(){act(image,value,stop);},1);  
        }
    }
}

我知道代码不是最有效的代码，但它可以工作。而且您可以看到动画过滤器消耗了太多时间。

（我用 1920x1080px 的图片测试过，也许你可以用更小的图片）

Answer 2

这是亮度滤镜的更新版本

  var brightnessValue = 0.9;
  var brightnessFilter = new fabric.Image.filters.Brightness({
    brightness: brightnessValue
  });
  fabricImage.filters.push(brightnessFilter);

  fabric.util.requestAnimFrame(function brightnessFilterAnimation() {
    brightnessValue = brightnessValue - 0.04;
    brightnessFilter.brightness = brightnessValue;
    fabricImage.applyFilters();
    if (brightnessValue > 0) {
      fabric.util.requestAnimFrame(brightnessFilterAnimation);
    }
  });