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

本文小編為大家詳細(xì)介紹“Android Flutter圖片處理之高斯模糊如何實現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Android Flutter圖片處理之高斯模糊如何實現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

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軸同時模糊

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

用法

BackdropFilter

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

  const BackdropFilter({
    Key? key,
    required this.filter,
    Widget? child,
  })

filter是一個ImageFilter過濾器，過濾器的效果會應(yīng)用于父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),
            /// 必須設(shè)置一個空容器
            child: Container(),
          ),
    }

注意：child中必須設(shè)置一個空的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

使用起來非常簡單，只需要設(shè)置一個過濾器，child中添加圖片即可實現(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圖片處理之高斯模糊如何實現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。