在Flutter应用中,我有一张图像和三个滑块,一个用于色调,一个用于饱和度,一个用于亮度,并且我正在尝试找出如何使用ColorFiltered
小部件进行这些调整,但是我无法弄清楚ColorFilter.matrix
的内容。
我的代码如下:
ColorFiltered(
colorFilter: ColorFilter.matrix(
// What goes here?
),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(myImageUrl),
)
)
)
)
有人知道如何根据HSV值生成滤色器矩阵吗?
答案 0 :(得分:0)
为解决此问题,我构建了一个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之间的十进制形式输入百分比。
使用3层ColorFiltered小部件:
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,并创建了一个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个颜色过滤的矩阵(可能会更有效),但是这适用于我的情况。
答案 1 :(得分:0)
我们必须在其中包含一个颜色矩阵。 一些例子是:
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]);
只需复制上面的矩阵即可获得棕褐色或灰度滤镜。