目录ImageFilter横向模糊垂直模糊xy轴同时模糊用法BackdropFilterImageFiltered区别ImageFilter 在Flutter中,使图片模糊有2种方式
在Flutter中,使图片模糊有2种方式,这2种方式都需要配合ImageFilter.blur()使用。
factory ImageFilter.blur({ double sigmaX = 0.0, double sigmaY = 0.0, TileMode tileMode = TileMode.clamp })
sigmaX:以x轴方向模糊,值越大越模糊
sigmaY:以Y轴方向模糊,值越大越模糊
TileMode:不需要设置,使用默认值就行
原图
ImageFilter.blur(sigmaX: 10, sigmaY: 0)
ImageFilter.blur(sigmaX: 0, sigmaY: 10)
ImageFilter.blur(sigmaX: 20, sigmaY: 20)
如果是前端开发,看到这个名字应该很熟悉。和CSS中的backdrop-filter
一样,都是用来实现毛玻璃效果。
const BackdropFilter({
Key? key,
required this.filter,
Widget? child,
})
filter是一个ImageFilter
过滤器,过滤器的效果会应用于父Widget的子widget,过滤器不会作用在child上。所以一般都是使用Stack,将BackdropFilter
放在图片之上。
示例:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('blur demo'),
),
body: Stack(
children: [
/// 图片在Stack最底层
Image.asset(
“assets/images/painting2.jpg”,
),
BackdropFilter(
/// 过滤器
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
/// 必须设置一个空容器
child: Container(),
),
}
注意:child中必须设置一个空的Container
,不然模糊效果不会生效。
局部模糊
BackdropFilter
支持局部模糊,必须使用ClipRect
或者其他ClipXXX包裹。
body: Stack(
children: [
Image.asset(imgs[0]),
Positioned(
left: 100,
right: 100,
top: 200,
bottom: 200,
/// 必须clip,否则会对整个区域模糊。
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
child: Container(
alignment: Alignment.center,
color: Colors.black.withOpacity(0),
child: Text('child不会被模糊处理'),
),
),
),
)
],
),
使用起来非常简单,只需要设置一个过滤器,child中添加图片即可实现模糊效果。
ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Image.asset(
"assets/images/painting2.jpg",
),
)
Drop更适合处理局部模糊,性能没有ImageFiltered
好。如果只需要对图片全部区域进行模糊处理,推荐使用ImageFiltered
。
以上就是Android Flutter图片处理之高斯模糊的实现的详细内容,更多关于Android Flutter高斯模糊的资料请关注编程网其它相关文章!
--结束END--
本文标题: AndroidFlutter图片处理之高斯模糊的实现
本文链接: https://lsjlt.com/news/171767.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0