欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android Flutter圖片處理之高斯模糊的實現(xiàn)

 更新時間：2022年08月04日 11:33:31   作者：旺仔大牛  
這篇文章主要為大家詳細介紹了如何利用Android Flutter實現(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：不需要設置，使用默認值就行

原圖

橫向模糊

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

垂直模糊

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

xy軸同時模糊

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

用法

BackdropFilter

如果是前端開發(fā)，看到這個名字應該很熟悉。和CSS中的backdrop-filter一樣，都是用來實現(xiàn)毛玻璃效果。

  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，否則會對整個區(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不會被模糊處理'),
           ),
         ),
       ),
     )
   ],
 ),

ImageFiltered

使用起來非常簡單，只需要設置一個過濾器，child中添加圖片即可實現(xiàn)模糊效果。

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

區(qū)別

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

以上就是Android Flutter圖片處理之高斯模糊的實現(xiàn)的詳細內(nèi)容，更多關(guān)于Android Flutter高斯模糊的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論