Android Flutter图片处理之高斯模糊的实现

 更新时间:2022年08月04日 11:33:31   作者:旺仔大牛  
这篇文章主要为大家详细介绍了如何利用Android Flutter实现高斯模糊效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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高斯模糊的资料请关注脚本之家其它相关文章!

相关文章

  • 利用OPENCV为android开发畸变校正的JNI库方法

    利用OPENCV为android开发畸变校正的JNI库方法

    今天小编就为大家分享一篇利用OPENCV为android开发畸变校正的JNI库方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Android编程开发中的正则匹配操作示例

    Android编程开发中的正则匹配操作示例

    这篇文章主要介绍了Android编程开发中的正则匹配操作,结合具体实例形式分析了Android针对手机号、邮箱及IP的正则匹配操作相关实现技巧,需要的朋友可以参考下
    2017-06-06
  • XRecyclerView实现下拉刷新、滚动到底部加载更多等功能

    XRecyclerView实现下拉刷新、滚动到底部加载更多等功能

    这篇文章主要为大家详细介绍了XRecyclerView实现下拉刷新、滚动到底部加载更多等功能,以及添加header功能的RecyclerView,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Flutter Dio二次封装的实现

    Flutter Dio二次封装的实现

    这篇文章主要介绍了Flutter Dio二次封装的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 一文详解如何在Flutter中使用导航Navigator

    一文详解如何在Flutter中使用导航Navigator

    一个APP如果没有页面跳转那么是没有灵魂的,页面跳转的一个常用说法就是Navigator。那么在flutter中如何使用Navigator呢?本文就来和大家详细聊聊
    2023-02-02
  • Android 开机应用扫描相关总结

    Android 开机应用扫描相关总结

    本篇文章只是作为指南引导去看PkMS,不会贴大段代码进行分析,更多是基于方法分析实现的逻辑,另外就是代码是基于Android 11,与Android 10之前代码有比较大的差别。
    2021-05-05
  • Android调用摄像头拍照开发教程

    Android调用摄像头拍照开发教程

    这篇文章主要为大家详细介绍了Android调用摄像头拍照的开发教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • Android全屏设置的方法总结

    Android全屏设置的方法总结

    这篇文章主要介绍了Android全屏设置的方法总结的相关资料,需要的朋友可以参考下
    2017-06-06
  • 基于Android ListView之加载使用技巧

    基于Android ListView之加载使用技巧

    本篇文章小编为大家介绍,基于Android ListView之加载使用技巧。需要的朋友参考下
    2013-04-04
  • Android自定义控件实现带数值和动画的圆形进度条

    Android自定义控件实现带数值和动画的圆形进度条

    这篇文章主要为大家详细介绍了Android自定义控件实现带数值和动画的圆形进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12

最新评论