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

相关文章

  • Kotlin server多线程编程详细讲解

    Kotlin server多线程编程详细讲解

    这篇文章主要介绍了Kotlin server多线程编程,Service是实现程序后台运行的解决方案,适合执行非交互,后台预先的任务,即使用户打开其他应用,Service也能够正常运行
    2023-01-01
  • android之自定义Toast使用方法

    android之自定义Toast使用方法

    有时我们的程序使用默认的Toast时会和程序的整体风格不搭配,这个时候我们就需要自定义Toast,使其与我们的程序更加融合,使用自定义Toast,首先我们需要添加一个布局文件,该布局文件的结构和Activity使用的布局文件结构一致,在该布局文件中我们需设计我们Toast的布局
    2013-01-01
  • Android编程开发音乐播放器实例

    Android编程开发音乐播放器实例

    这篇文章主要介绍了Android编程开发音乐播放器,结合实例形式分析了Android音乐播放器开发所涉及的SeekBar,ListView,广播接收者(以代码的形式注册Receiver),系统服务,MediaPlayer等技巧,需要的朋友可以参考下
    2016-01-01
  • Android修改字体样式的示例代码

    Android修改字体样式的示例代码

    本篇文章主要介绍了Android修改字体样式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Afianl框架里面的FinalBitmap加载网络图片

    Afianl框架里面的FinalBitmap加载网络图片

    这篇文章主要介绍了Afianl框架里面的FinalBitmap加载网络图片的相关资料,需要的朋友可以参考下
    2015-07-07
  • Android实现自定义带文字和图片Button的方法

    Android实现自定义带文字和图片Button的方法

    这篇文章主要介绍了Android实现自定义带文字和图片Button的方法,涉及Android针对Button按钮的布局与设计技巧,需要的朋友可以参考下
    2015-05-05
  • Android Jetpack- Paging的使用详解

    Android Jetpack- Paging的使用详解

    这篇文章主要介绍了Android Jetpack- Paging的使用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • Android切面编程知识点详解

    Android切面编程知识点详解

    这篇文章给大家整理了关于Android进阶资深开发必备技能-切面编程的相关知识点内容,有兴趣的朋友可以参考学习下。
    2018-07-07
  • Android仿京东首页秒杀倒计时

    Android仿京东首页秒杀倒计时

    这篇文章主要为大家详细介绍了Android仿京东首页秒杀倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • android Launcher3设置默认桌面应用

    android Launcher3设置默认桌面应用

    这篇文章主要为大家详细介绍了android Launcher3设置默认桌面应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07

最新评论