是否可以在Fabric.js中为图像过滤器设置动画效果?如“像素化”滤镜。是否可以在Fabric.js中设置动画效果?
4
A
回答
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图像测试它,也许你可以用更小的图像使用它)
+0
使用'fabric.util.requestAnimFrame'可能会更有效率(而不是手动递归的'setTimeout') – kangax 2013-11-18 16:46:55
0
这里是亮度过滤器更新版本
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);
}
});
相关问题
- 1. 可以在fabric.js中为路径设置动画效果吗?
- 2. 是否可以为DialogFragment设置动画效果?
- 3. 是否可以在CSS3中为渐变不透明设置动画效果?
- 4. 你可以在画布上设置动画效果
- 5. 是否可以为UIEdgeInsets设置动画?
- 6. 是否可以为UIImage设置动画?
- 7. 是否可以在ArcMap中为标记添加动画效果?
- 8. 是否可以使用ObjectAnimator为Canvas上的对象设置动画效果?
- 9. 仅在UIBarButtonItem中设置动画效果
- 10. 在Raphael.js中设置动画效果
- 11. 是否有可能为WPF中的BringIntoView方法设置动画效果?
- 12. jquery可以为css背景属性设置动画效果吗?
- 13. 在{N}中,我可以为图像backgroundPosition设置动画效果吗?
- 14. 是否可以使用setTimeout设置循环动画?
- 15. Android,是否可以为TextView.setGravity()设置动画?
- 16. iOS;是否可以将动画图标设置为UITabController图标?
- 17. 在android中重置动画效果
- 18. 是否可以在NSPanel上使用核心动画(效果)背后的模糊?
- 19. 是否可以在window.onPopState中设置e.preventDefault?
- 20. 是否可以在FileStream中设置BufferSize?
- 21. 是否可以使用CSS代码为SVG滤镜的不透明度设置动画效果?
- 22. 是否可以设置VoiceMailNumber?
- 23. 如何在javascript/css中为日志流设置动画效果
- 24. 在Cocoa Touch中为图像视图设置动画效果
- 25. 如何在NSImageView中为内容切换设置动画效果?
- 26. 在自定义视图中为Drawable设置动画效果
- 27. 如何在UIView中设置动画效果
- 28. 如何在UITableView中为UIButton设置动画效果?
- 29. 如何在Inno Setup中设置动画效果
- 30. 如何在Android中设置两个硬币的动画效果
究竟如何要设置动画过滤器?哪个参数在一段时间内应该改变? – kangax 2013-03-05 00:51:00
如过滤器亮度,以缓慢改变亮度 – Faradey 2013-03-05 06:38:47
,你可以在俄罗斯问问题 – Faradey 2013-03-05 06:41:24