首頁 > 軟體

Android Flutter圖片處理之高斯模糊的實現

2022-08-04 18:02:59

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:不需要設定,使用預設值就行

原圖

橫向模糊

ImageFilter.blur(sigmaX: 10, sigmaY: 0)

垂直模糊

ImageFilter.blur(sigmaX: 0, sigmaY: 10)

xy軸同時模糊

ImageFilter.blur(sigmaX: 20, sigmaY: 20)

用法

BackdropFilter

如果是前端開發,看到這個名字應該很熟悉。和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不會被模糊處理'),
           ),
         ),
       ),
     )
   ],
 ),

ImageFiltered

使用起來非常簡單,只需要設定一個過濾器,child中新增圖片即可實現模糊效果。

 ImageFiltered(
   imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
   child: Image.asset(
     "assets/images/painting2.jpg",
   ),
 )

區別

Drop更適合處理區域性模糊,效能沒有ImageFiltered好。如果只需要對圖片全部區域進行模糊處理,推薦使用ImageFiltered

以上就是Android Flutter圖片處理之高斯模糊的實現的詳細內容,更多關於Android Flutter高斯模糊的資料請關注it145.com其它相關文章!


IT145.com E-mail:sddin#qq.com