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
如果是前端開(kāi)發(fā),看到這個(gè)名字應(yīng)該很熟悉。和CSS中的backdrop-filter
一樣,都是用來(lái)實(shí)現(xiàn)毛玻璃效果。
const BackdropFilter({ Key? key, required this.filter, Widget? child, })
filter是一個(gè)ImageFilter
過(guò)濾器,過(guò)濾器的效果會(huì)應(yīng)用于父Widget的子widget,過(guò)濾器不會(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( /// 過(guò)濾器 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ì)對(duì)整個(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
使用起來(lái)非常簡(jiǎn)單,只需要設(shè)置一個(gè)過(guò)濾器,child中添加圖片即可實(shí)現(xiàn)模糊效果。
ImageFiltered( imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20), child: Image.asset( "assets/images/painting2.jpg", ), )
區(qū)別
Drop更適合處理局部模糊,性能沒(méi)有ImageFiltered
好。如果只需要對(duì)圖片全部區(qū)域進(jìn)行模糊處理,推薦使用ImageFiltered
。
以上就是Android Flutter圖片處理之高斯模糊的實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于A(yíng)ndroid Flutter高斯模糊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
利用OPENCV為android開(kāi)發(fā)畸變校正的JNI庫(kù)方法
今天小編就為大家分享一篇利用OPENCV為android開(kāi)發(fā)畸變校正的JNI庫(kù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Android編程開(kāi)發(fā)中的正則匹配操作示例
這篇文章主要介紹了Android編程開(kāi)發(fā)中的正則匹配操作,結(jié)合具體實(shí)例形式分析了Android針對(duì)手機(jī)號(hào)、郵箱及IP的正則匹配操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06XRecyclerView實(shí)現(xiàn)下拉刷新、滾動(dòng)到底部加載更多等功能
這篇文章主要為大家詳細(xì)介紹了XRecyclerView實(shí)現(xiàn)下拉刷新、滾動(dòng)到底部加載更多等功能,以及添加header功能的RecyclerView,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08一文詳解如何在Flutter中使用導(dǎo)航Navigator
一個(gè)APP如果沒(méi)有頁(yè)面跳轉(zhuǎn)那么是沒(méi)有靈魂的,頁(yè)面跳轉(zhuǎn)的一個(gè)常用說(shuō)法就是Navigator。那么在flutter中如何使用Navigator呢?本文就來(lái)和大家詳細(xì)聊聊2023-02-02Android 開(kāi)機(jī)應(yīng)用掃描相關(guān)總結(jié)
本篇文章只是作為指南引導(dǎo)去看PkMS,不會(huì)貼大段代碼進(jìn)行分析,更多是基于方法分析實(shí)現(xiàn)的邏輯,另外就是代碼是基于A(yíng)ndroid 11,與Android 10之前代碼有比較大的差別。2021-05-05Android調(diào)用攝像頭拍照開(kāi)發(fā)教程
這篇文章主要為大家詳細(xì)介紹了Android調(diào)用攝像頭拍照的開(kāi)發(fā)教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04基于A(yíng)ndroid ListView之加載使用技巧
本篇文章小編為大家介紹,基于A(yíng)ndroid ListView之加載使用技巧。需要的朋友參考下2013-04-04Android自定義控件實(shí)現(xiàn)帶數(shù)值和動(dòng)畫(huà)的圓形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)帶數(shù)值和動(dòng)畫(huà)的圓形進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12