Color Filters 颜色滤镜的实现原理

color filter是一个滤镜工具,在 fluttter上实现单色翻转,包括普通的widget和image图片。github上的demo color_filtered_demo 这个作者是RXVMS的开发者,RXVMS是一套flutter app开发框架。 今天介绍一下如何实现颜色翻转,或滤镜的。

前言

作者一直在寻找一种实现单色翻转的方案,直到看到twitter上有人介绍ColorFiltered这个widget,于是灵机一动,想到了在flutter上面做一个颜色翻转工具。

原理

我们知道一个颜色有RGBA决定,当额外加一个constant变量时,我们将其变成了5*4的矩阵,如下所示。

初始化

我们在这个5×4的矩阵做一些修改,改变这个矩阵的,即改变当前的颜色,最终得到的颜色是这个

随意修改值

那么,很容知道颜色翻转就是对rgb值都乘以-1,于是得到了这个结果。

翻转图

编码实现

flutter-color-filter
demo图

定义几个矩阵,为了做滤镜色值运算

Map<String, List<double>> predefinedFilters = {
  'Identity': [
    //R  G   B    A  Const
    1, 0, 0, 0, 0, //
    0, 1, 0, 0, 0, //
    0, 0, 1, 0, 0, //
    0, 0, 0, 1, 0, //
  ],
  'Grey Scale': [
    //R  G   B    A  Const
    0.33, 0.59,0.11, 0,0,//
    0.33,0.59,0.11, 0,0,//
    0.33, 0.59,0.11, 0,0,//
    0, 0, 0, 1, 0, //
  ],
  'Invers': [
    //R  G   B    A  Const
    -1, 0, 0, 0, 255, //
    0, -1, 0, 0, 255, //
    0, 0, -1, 0, 255, //
    0, 0, 0, 1, 0, //
  ],
  'Sepia': [
    //R  G   B    A  Const
    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, //
  ],
};

矩阵被定义为以行优先的顺序排列的List double,这意味着行被串联到一个大列表中。使用过滤器与任何其他widget一样容易:

child: GestureDetector(
    onTap: pickImage,
    child: imageFile != null
        ? ColorFiltered(
            colorFilter: ColorFilter.matrix(matrixValues
                .map<double>((entry) => entry.value)
                .toList()),
            child: Image.file(
            imageFile,
            fit: BoxFit.cover,
            ),
        )
        : Center(child: Text('Tap here to select image')),
),
As a side no

发表评论

电子邮件地址不会被公开。 必填项已用*标注