ImageFiltered 也是官方之后更新一批组件之一，用于对图像添加滤镜效果，比如图像的颜色矩阵变换、高斯模糊、图像矩阵变换等。注意，这不是仅指 Image 组件，而是对于任何的 Widget 都适用。 在其诞生之前，有一个和其功能类似的组件 BackdropFilter ，但该组件的作用于是 背景，如果想对特点的组件进行特效处理，就很不方便 。ImageFiltered 的引入，让这一切变得简单。
目前该组件已收录入 FlutterUnit ，大家可以在更新查阅，另外也项目中也开始考虑，将一些组件的枚举参数通过可切换 的方式进行操作。如果 FlutterUnit 对你有所帮助，欢迎在 github 中给个 star 以示支持~
一、认识 ImageFiltered 组件
在 ImageFiltered 组件中，只需要传入一个 ImageFilter 对象即可。该类型在就是 BackdropFilter 中的那位，所以 ImageFiltered 入手难度还是非常低的。
先来认识一下 ImageFilter 类，它是一个 抽象类 ，但其中定义了三个 factory 命名构造，分别用于 模糊- blur、矩阵变换 - matrix 和 多效果合成 - compose ，
我们知道，抽象类肯定是不能直接实例化的，在运行时肯定是特定实现类。如下所示，这三个 factory 命名构造，本质上是在构造下面红框中的三个 ImageFiltered 子类。另外注意一点 ColorFilter 也是 ImageFiltered 的实现类，所以我们可以通过它实现滤色效果。
二、ImageFiltered 的模糊效果
通过 ImageFilter.blur 可以构建出 _GaussianBlurImageFilter ，也就是高斯模糊图像过滤器。其中有三个参数，我们下面通过代码测试一下：
代码中的使用是非常简单的，把 ImageFiltered 套在任意目标组件上，提供 imageFilter 入参即可，如下是 _TargetContent 组件。
ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: _sigmaX,
sigmaY: _sigmaY,
tileMode: _tileMode,
),
child: const _TargetContent(),
),1. 模糊的方向
下面通过左右两个 Slider 分别控制 sigmaX 和 sigmaY 的值。通过对比可以发现，sigmaX 决定水平方向上的模糊程度；sigmaY 决定竖直方向上的模糊程度：
2. 模糊程度
如下的两组对比可以看出 sigmaX 和 sigmaY 的值越大，模糊程度就越高：
3.平铺模式
最后还是一个 TileMode枚举 ，有四种元素。在测试中通过点击对应的文字进行效果切换。从表面上似乎很难看出它们是干嘛的，其实打开布局边线就很容易明白。如下，红框是组件实际的占位，但 模糊效果 会有 sigmaX,sigmaY 的溢出，而 TileMode 就是确定溢出区域如何显示。
比如下面的 TileMode.mirror 效果是在溢出区域内，通过原图像进行镜像显示：
TileMode.repeated 效果是在溢出区域内，通过原图像进行重复显示：
另外 TileMode.clamp 是默认的类型，在 溢出区域内 每行的像素都取自边界，产生一直拉伸的效果。
TileMode.decal 效果是在溢出区域内，使用透明色。感觉这个效果是最自然的：
这就是通过 ImageFilter.blur 实现模糊的效果。
三、ImageFiltered 的矩阵变换效果
ImageFiltered.matrix 构造中，会构造 _MatrixImageFilter 对象，其中需要传入 Float64List 数组，并且长度是 16 。也就是一个 4*4 的矩阵。
image-20220423084947599当然，你可以直接写十六个数组，但通过 Matrix4 对象可以更方便的进行操作，通过 Matrix4 的 storage 可以获取 Float64List 数组。其是 Matrix4 本质上就是对这 16 个数字进行维护而已。
下面通过一个 Slider 控制旋转角度，简单实现一下选择效果。可以看出 变换中心 并不能组件的中心：
ImageFiltered(
imageFilter: ImageFilter.matrix(
Matrix4.rotationZ(_sigmaX/180*pi).storage
),
child: const _TargetContent(),
),另外，通过两帧的旋转对比，可以推断出变化中心是屏幕的左上角：
如果需要使 变换中心 在组件中心，需要进行额外的偏移处理，但这个尺寸需要进行计算。倒不如直接使用 Transform 组件比较方便，可以指定 变换中心。
四、ColorFilter 与 ImageFiltered
ColorFilter作为 ImageFilter 的实现类，自然也可以在 ImageFiltered 中使用。我们可以通过一个 5*4 的颜色矩阵对图像的色彩进行变换。比如下面的矩阵可以实现色彩的反转：
ColorFilter invert = const ColorFilter.matrix(<double>[
-1, 0, 0, 0, 255,
0, -1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0,
]);
至于变换的原理，在 《Flutter 绘制指南 - 妙笔生花》的第八章，有所介绍，这里就不引申了。
灰色：
ColorFilter greyscale = const ColorFilter.matrix(<double>[
0.2126, 0.7152, 0.0722, 0, 0,
0.2126, 0.7152, 0.0722, 0, 0,
0.2126, 0.7152, 0.0722, 0, 0,
0, 0, 0, 1, 0,
]);
暗色
ColorFilter darken = const ColorFilter.matrix(<double>[
1, 0, 0, 0, -126.0,
0, 1, 0, 0, -126.0,
0, 0, 1, 0, -126.0,
0, 0, 0, 1, 0
]);
棕褐色调
ColorFilter sepia = const ColorFilter.matrix(<double>[
0.393, 0.769, 0.189, 0, 0,
0.349, 0.686, 0.168, 0, 0,
0.272, 0.534, 0.131, 0, 0,
0, 0, 0, 1, 0,
]);
srgbToLinearGamma和linearToSrgbGamma
另外 ColorFilter 中还提供了两个命名构造，效果如下，上来看像是对颜色的饱和度进行加重和减弱。
const ColorFilter.srgbToLinearGamma()
const ColorFilter.linearToSrgbGamma()
五、源码实现简看
感觉 ImageFiltered 可以支持 ColorFilter ，这无疑是在抢 ColorFiltered 的饭碗。就好像在说，你能做的我也能做，你不能做的我还能做。
ImageFiltered 通过 _ImageFilterRenderObject 渲染对象实现功能：
_ImageFilterRenderObject 在绘制方法中，通过添加 ImageFilterLayer 层，为该层进行效果处理：
那么 ImageFiltered 组件的介绍就到这里，谢谢观看 ~
