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);  
        }
    }
}

我知道代码不是最有效的代码，但它有效。你可以看到Animating过滤器消耗的时间过长了。

（我用一张1920x1080像素的图片测试过，也许你可以用较小的图片来使用它）

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);
    }
  });

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

2 个答案: