iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >AndroidFlutter图片处理之高斯模糊的实现
  • 343
分享到

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

AndroidFlutter高斯模糊Android高斯模糊Flutter高斯模糊 2022-11-13 14:11:39 343人浏览 安东尼
摘要

目录ImageFilter横向模糊垂直模糊xy轴同时模糊用法BackdropFilterImageFiltered区别ImageFilter 在Flutter中,使图片模糊有2种方式

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高斯模糊的资料请关注编程网其它相关文章!

--结束END--

本文标题: AndroidFlutter图片处理之高斯模糊的实现

本文链接: https://www.lsjlt.com/news/171767.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作