如何在Flutter中调整图像或小部件的色调、饱和度和亮度?

3zwjbxry  于 11个月前  发布在  Flutter
关注(0)|答案(4)|浏览(173)

在我的Flutter应用程序中,我有一个图像和三个滑块,一个用于Hue,一个用于Saturation,一个用于Brightness,我试图弄清楚如何使用ColorFiltered小部件进行这些调整,但我不知道该为ColorFilter.matrix放什么。
我的代码看起来像这样:

ColorFiltered(
  colorFilter: ColorFilter.matrix(
    // What goes here?
  ),
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.cover,
        image: NetworkImage(myImageUrl),
      )
    )
  )
)

字符串
有人知道如何根据HSV值生成滤色器矩阵吗?

wlp8pajw

wlp8pajw1#

为了解决这个问题,我构建了一个ImageFilter小部件,可以这样使用:

ImageFilter(
  hue: 0.1,
  brightness: -0.6,
  saturation: 0.8,
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.cover,
        image: NetworkImage(imageUrl),
      ),
    )
  )
)

字符串
它以-1和1之间的十进制形式输入百分比。
它使用ColorFiltered小部件的3个层:

Widget ImageFilter({brightness, saturation, hue, child}) {
  return ColorFiltered(
    colorFilter: ColorFilter.matrix(
      ColorFilterGenerator.brightnessAdjustMatrix(
        value: brightness,
      )
    ),
    child: ColorFiltered(
      colorFilter: ColorFilter.matrix(
        ColorFilterGenerator.saturationAdjustMatrix(
          value: saturation,
        )
      ),
      child: ColorFiltered(
        colorFilter: ColorFilter.matrix(
          ColorFilterGenerator.hueAdjustMatrix(
            value: hue,
          )
        ),
        child: child,
      )
    )
  );
}


为了生成过滤器矩阵,我使用了这个答案的帮助,为android:https://stackoverflow.com/a/7917978/937841创建了一个在flutter中工作的ColorFilterGenerator

import 'dart:math';

class ColorFilterGenerator {
    static List<double> hueAdjustMatrix({double value}) {
      value = value * pi;

      if (value == 0)
        return [
          1,0,0,0,0,
          0,1,0,0,0,
          0,0,1,0,0,
          0,0,0,1,0,
        ];

      double cosVal = cos(value);
      double sinVal = sin(value);
      double lumR = 0.213;
      double lumG = 0.715;
      double lumB = 0.072;

      return List<double>.from(<double>[
        (lumR + (cosVal * (1 - lumR))) + (sinVal * (-lumR)), (lumG + (cosVal * (-lumG))) + (sinVal * (-lumG)), (lumB + (cosVal * (-lumB))) + (sinVal * (1 - lumB)), 0, 0, (lumR + (cosVal * (-lumR))) + (sinVal * 0.143), (lumG + (cosVal * (1 - lumG))) + (sinVal * 0.14), (lumB + (cosVal * (-lumB))) + (sinVal * (-0.283)), 0, 0, (lumR + (cosVal * (-lumR))) + (sinVal * (-(1 - lumR))), (lumG + (cosVal * (-lumG))) + (sinVal * lumG), (lumB + (cosVal * (1 - lumB))) + (sinVal * lumB), 0, 0, 0, 0, 0, 1, 0,
      ]).map((i) => i.toDouble()).toList();
    }

    static List<double> brightnessAdjustMatrix({double value}}) {
      if (value <= 0)
        value = value * 255;
      else value = value * 100

      if (value == 0)
        return [
          1,0,0,0,0,
          0,1,0,0,0,
          0,0,1,0,0,
          0,0,0,1,0,
        ];

      return List<double>.from(<double>[
        1, 0, 0, 0, value, 0, 1, 0, 0, value, 0, 0, 1, 0, value, 0, 0, 0, 1, 0
      ]).map((i) => i.toDouble()).toList();
    }

    static List<double> saturationAdjustMatrix({double value}) {
      value = value * 100;

      if (value == 0)
        return [
          1,0,0,0,0,
          0,1,0,0,0,
          0,0,1,0,0,
          0,0,0,1,0,
        ];

      double x = ((1 + ((value > 0) ? ((3 * value) / 100) : (value / 100)))).toDouble();
      double lumR = 0.3086;
      double lumG = 0.6094;
      double lumB = 0.082;

      return List<double>.from(<double>[
        (lumR * (1 - x)) + x, lumG * (1 - x), lumB * (1 - x),
        0, 0,
        lumR * (1 - x),
        (lumG * (1 - x)) + x,
        lumB * (1 - x),
        0, 0,
        lumR * (1 - x),
        lumG * (1 - x),
        (lumB * (1 - x)) + x,
        0, 0, 0, 0, 0, 1, 0,
      ]).map((i) => i.toDouble()).toList();
    }
}


我敢打赌,有一种方法可以连接色调/饱和度/亮度矩阵(就像我上面提到的android问题中所做的那样),并且只使用1个颜色过滤矩阵(这可能更有效),但这对我的情况有效。

hi3rlvi2

hi3rlvi22#

我已经把BananaNeil的答案添加到Themed package中了。
使用提供的ChangeColors小部件来更改任何小部件的亮度,饱和度和色调,包括图像,如下所示:

ChangeColors(
   hue: 0.55,
   brightness: 0.2,
   saturation: 0.1,
   child: Image.asset('myImage.png'),
);

字符串
参数为:

亮度

  • 负值将使其更暗(-1最暗)。
  • 正值将使其变轻(1是最大值,但您可以超过它)。
  • 0.0没有变化。

饱和度

  • 负值将使其饱和度降低(-1是灰度)。
  • 正值将使其更饱和(1是最大值,但您可以超过它)。
  • 0.0没有变化。

hue

  • -1.01.0(注意:1.0 Package 到-1.0中,例如1.2-0.8相同)。
  • 0.0不变。加上或减去2.0的倍数也保持不变。
    请注意:ChangeColors小部件与BananaNeil的答案不同的是,该小部件是一个正确的StatelessWidget,代码是null-safe的,它修复了饱和度的限制,这样你就不会得到奇怪的效果,并且添加了解释参数的文档。如果你不想添加包,只需复制GitHub的代码。
hkmswyz6

hkmswyz63#

我们必须在其中包含颜色矩阵。一些示例如下:

static const ColorFilter sepia = 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]);

static const ColorFilter greyscale = 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]);

字符串
只要复制上面的矩阵得到一个深褐色或灰度过滤器。

iih3973s

iih3973s4#

我进一步调整了BananaNeil和Marcelo Glasberg的答案,将3个矩阵合并为1个矩阵,同时还添加了对调整儿童对比度的支持,从而提高了表现。

ColorFiltered(
  colorFilter: ColorFilters.matrix(brightness: -0.5, saturation: 0.5),
  child: Image.network('https://upload.wikimedia.org/wikipedia/commons/c/c6/500_x_500_SMPTE_Color_Bars.png'),
);

字符串
它是Stevia封装的一部分。
或者,如果您不想添加软件包,可以复制source code

相关问题