Android Flutter圖片處理之高斯模糊的實(shí)現(xiàn)
ImageFilter
在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:不需要設(shè)置,使用默認(rèn)值就行
原圖

橫向模糊
ImageFilter.blur(sigmaX: 10, sigmaY: 0)

垂直模糊
ImageFilter.blur(sigmaX: 0, sigmaY: 10)

xy軸同時(shí)模糊
ImageFilter.blur(sigmaX: 20, sigmaY: 20)

用法
BackdropFilter
如果是前端開發(fā),看到這個(gè)名字應(yīng)該很熟悉。和CSS中的backdrop-filter一樣,都是用來實(shí)現(xiàn)毛玻璃效果。
const BackdropFilter({
Key? key,
required this.filter,
Widget? child,
})
filter是一個(gè)ImageFilter過濾器,過濾器的效果會(huì)應(yīng)用于父Widget的子widget,過濾器不會(huì)作用在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),
/// 必須設(shè)置一個(gè)空容器
child: Container(),
),
}
注意:child中必須設(shè)置一個(gè)空的Container,不然模糊效果不會(huì)生效。
局部模糊
BackdropFilter支持局部模糊,必須使用ClipRect或者其他ClipXXX包裹。
body: Stack(
children: [
Image.asset(imgs[0]),
Positioned(
left: 100,
right: 100,
top: 200,
bottom: 200,
/// 必須clip,否則會(huì)對整個(gè)區(qū)域模糊。
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
child: Container(
alignment: Alignment.center,
color: Colors.black.withOpacity(0),
child: Text('child不會(huì)被模糊處理'),
),
),
),
)
],
),

ImageFiltered
使用起來非常簡單,只需要設(shè)置一個(gè)過濾器,child中添加圖片即可實(shí)現(xiàn)模糊效果。
ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Image.asset(
"assets/images/painting2.jpg",
),
)
區(qū)別
Drop更適合處理局部模糊,性能沒有ImageFiltered好。如果只需要對圖片全部區(qū)域進(jìn)行模糊處理,推薦使用ImageFiltered。
以上就是Android Flutter圖片處理之高斯模糊的實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于Android Flutter高斯模糊的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Afianl框架里面的FinalBitmap加載網(wǎng)絡(luò)圖片
這篇文章主要介紹了Afianl框架里面的FinalBitmap加載網(wǎng)絡(luò)圖片的相關(guān)資料,需要的朋友可以參考下2015-07-07
Android實(shí)現(xiàn)自定義帶文字和圖片Button的方法
這篇文章主要介紹了Android實(shí)現(xiàn)自定義帶文字和圖片Button的方法,涉及Android針對Button按鈕的布局與設(shè)計(jì)技巧,需要的朋友可以參考下2015-05-05
android Launcher3設(shè)置默認(rèn)桌面應(yīng)用
這篇文章主要為大家詳細(xì)介紹了android Launcher3設(shè)置默認(rèn)桌面應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

