⭐️ 请首要看我 ⭐️

  1. 下面介绍的功用都是有 IDKit 库供给。
  2. 下面该功用需求 idkit ^ 0.3.5 以及以上能够运用。
  3. idkit 包的引进办法如下:
    1. 能够手动引进 idkit 包,便是将 idkit ^ 0.3.5 放在项目的 pubspec.yaml 文件的 dependencies 模块下,然后执行 flutter pub get 指令即可。
    2. 能够运用后指令 flutter pub add idkit 在项目根目录终端下执行即可。

[》跳过拾光回忆]

拾光回忆

1. Flutter 项目资产管理,看这一篇就够了!

简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支撑多种平台以及各平台无差异化、界面美观、功用齐全、方便便利。
引荐: ⭐️⭐️⭐️⭐️⭐️

2. Flutter 手势在多指触摸时一些办法会多次触发

简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。
引荐: ⭐️⭐️⭐️⭐️⭐️

3. Dart 的枚举类型的高阶用法

简介: 这是让开发者更深化的了解 Dart 的枚举以及相关运用和办法。
引荐: ⭐️⭐️⭐️

4. Flutter 能够快速完成单项或许多项选择,你知道吗?

简介: 这是让开发者愈加方便的完成单选、多选功用,无需你对数据处理。
引荐: ⭐️⭐️⭐️⭐️⭐️

5. Flutter 的吸收指针和疏忽指针的作用以及差异

简介: 这是让开发者更深化的了解 Flutter 的两种指针的介绍以及相关运用和办法。
引荐: ⭐️⭐️⭐️

6. Flutter 项目滑动轨迹的高阶用法

简介: 这是让开发者愈加方便的完成多种款式的轨迹滑块,比如:轨迹渐变色、触控笔悬浮标等。
引荐: ⭐️⭐️⭐️⭐️⭐️

7. Flutter 的 Debug 日志管理,可自定义多种输出款式

简介: 这是让开发者愈加方便的检查日志,经过日志能够剖析变量当时数值以及业务逻辑走势,一起也能作为日志收集日志文本。
引荐: ⭐️⭐️⭐️⭐️⭐️

8. Flutter 中 Image 图画方便增加图片水印或许文字水印

简介: 这是让开发者愈加方便的完成图画增加图片类型的水印和文字类型的水印,支撑水印多种款式的设定。
引荐: ⭐️⭐️⭐️⭐️⭐️

9. Flutter 中 Image 图画的高阶用法,你知道多少?

简介: IImageIDKit的其间一个功用模块,它供给了许多便利的图画处理办法,例如:尺寸调整、相对某点的矩形方位、巨细调整、图画缩放、布景去除、实在内容尺寸获取以及实在内容图画获取等等。
引荐: ⭐️⭐️⭐️⭐️⭐️

10. Flutter 中的 Matrix4,它有 16 个参数,您都知道它们的意义吗?

简介: 该篇主要介绍 Matrix4 的 16 个参数的意义。
引荐: ⭐️⭐️⭐️⭐️

[回来拾光回忆《]

一、 简述

色彩在 Flutter 开发中无处不在。在 Flutter 中,色彩的色彩空间有 RGBHSLHSV 三种格局。通常情况下,咱们在开发中运用 RGB 就能满意需求。但是,在一些对色彩要求特别高的处理中,RGB格局或许无法供给足够的精度。

二、色彩空间

  • HSV(Hue, Saturation, Value)
    HSV色彩空间将色彩分为色相(hue)、饱和度(saturation)和明度(value)三个维度。色相指色彩的种类,如红、绿、蓝等;饱和度指色彩艳丽的程度;明度指色彩亮度的程度。HSV 色彩空间关于调整和设定色彩较为直观,常用于图画处理和核算机图形学中。
  • HSL(Hue, Saturation, Lightness)
    HSL 色彩空间也是基于色相、饱和度和亮度三个维度来描绘色彩的。与 HSV 不同的是,HSL 将亮度作为一个独立维度,而不是运用明度。这使得 HS L色彩空间更适合于设计和图形艺术使用。
  • RGB(Red, Green, Blue)
    RGB 色彩空间是最常见的色彩表明法之一,它将色彩表明为红、绿、蓝三个成分的混合值。每个成分的取值范围通常是 0 到 255 之间,能够经过改动这三种色彩的值来调整色彩。RGB 色彩空间适用于彩色显示器和 LED 灯等设备。
  • LAB
    LAB 色彩空间是一种基于人眼感知的色彩模型,它将色彩表明为亮度(L)和与红绿(a)和黄蓝(b)相对应的三个轴上的坐标。这些轴代表了可感知的色彩变化,使得在LAB色彩空间中更容易比较、匹配和预测色彩的外观。LAB 常用于色彩管理和打印范畴,以保证图画的准确展现。

三、 Flutter – LABColor

Flutter 中包含的色彩空间有三种 RGBHSLHSV , 但是就缺少 LAB 色彩空间。 IDKit 库就对色彩的 LAB 进行了支撑,体现为 LABColorLABColor 供给了一些方便的构建办法和属性,下面咱们一起看看:

  • const LABColor.fromALAB(this.alpha, this.l, this.a, this.b)
    该办法是经过 alpha、l、a、b 各个参数生成 LABColor 类型的色彩。

  • factory LABColor.fromColor(Color color)
    该办法是经过 RGB 格局的色彩直接转化为 LABColor 类型的色彩。

  • LABColor withAlpha(double alpha)
    该办法是调整 alpha 不透明度生成新的 LABColor 的色彩。

  • LABColor withL(double l)
    该办法是调整 l 不透明度生成新的 LABColor 的色彩。

  • LABColor withA(double a)
    该办法是调整 a 不透明度生成新的 LABColor 的色彩。

  • LABColor withB(double b)
    该办法是调整 b 不透明度生成新的 LABColor 的色彩。

  • Color toColor()
    该办法是将 LAB 色彩转化为 RGB

四、色彩的其他妙招

  • 字符串方便转色彩(RGB)
    咱们以蓝湖为例,蓝湖供给的色彩格局有5 种,如下图所示:

    Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

    其间前三个没有方便生成 RGB 色彩的办法,所以下面咱们供给了一些方便办法, 如下:

    '#761DF2'.color;
    '#761DF2'.hexColor;
    '#FF761DF2'.aHexColor;
    '#761DF2FF'.hexAColor;
    
  • 由 RGB 色彩获取其他色彩空间的色彩

    final Color reduceColor = '#761DF2'.color;
    reduceColor.labColor;
    reduceColor.hslColor;
    reduceColor.hsvColor;
    

上边介绍了色彩的一部分方便办法,开发中这种功用遍地开花,咱们只需求自己感觉那个好就用那个。

五、 色彩差异

下面咱们将介绍 4 中办法来核算色彩的差异,如下所示:

1. bool euclideanDistanceColorDifference(Color color, {double tolerance = 1.0})

该办法是 RGB 色彩空间核算两个色彩的差异的办法。下面咱们进行测验:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

上面测验输出如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

从上面看 color1 更和 color 附近,而 color2 比较也输出 false 没有差异,那是因为咱们的容差默许设置为 1 。 咱们能够经过办法的 tolerance 参数依据自己的需求设置。

2. bool cie76ColorDifference(LABColor color, {double tolerance = 2.3})

该办法是 LAB 色彩空间的核算办法,如果是 RGB 色彩需求转换为 LAB 色彩核算。下面咱们进行测验,如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

上面代码输出如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

从上面输出看, colorL2 更挨近 colorL1, 从当时看当时的精准度高于 RGBeuclideanDistanceColorDifference 办法。其间咱们也能够依据自己的需求调整色彩的容差值(tolerance)以满意需求,容差值默许是 2.3, 2.3 是人眼色彩区分差异的最小值,官方称为 最小可觉差

3. bool cie94ColorDifference(LABColor color, {double tolerance = 1.0,ColorImageStyle colorImageStyle = ColorImageStyle.graphicArt,double kc = 1.0,double kh = 1.0,double sl = 1.0,})

该办法是 LAB 色彩空间的核算办法,如果是 RGB 色彩需求转换为 LAB 色彩核算。下面咱们进行测验,如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

上面输出如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

从上面输出看, colorL2 更挨近 colorL1, 从当时看当时的精准度高于 RGBeuclideanDistanceColorDifference 办法。咱们还能发现该办法的精度也高于 LABcie76ColorDifference 办法。 其间咱们也能够依据自己的需求调整色彩的容差值(tolerance)以满意需求,容差值默许是 2.3, 2.3 是人眼色彩区分差异的最小值,官方称为 最小可觉差。咱们还能够依据色彩的地点图画的类型(colorImageStyle)来调整精度,色彩地点图画的类型是 ColorImageStyle, 其包含两种: 图画艺术、纹路。还能够调整 kc、kh、sl 等使咱们精度更高。

4. bool ciede2000ColorDifference(LABColor color, {double tolerance = 2.3, double kc = 1.0,double kh = 1.0,double kl = 1.0,})

该办法是 LAB 色彩空间的核算办法,如果是 RGB 色彩需求转换为 LAB 色彩核算。下面咱们进行测验,如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

上面输出,如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

从上面输出看, colorL2 更挨近 colorL1, 从当时看当时的精准度高于 RGBeuclideanDistanceColorDifference 办法。咱们还能发现该办法的精度也高于 LABcie76ColorDifference 办法 和 cie94ColorDifference 办法。 其间咱们也能够依据自己的需求调整色彩的容差值(tolerance)以满意需求,容差值默许是 2.3, 2.3 是人眼色彩区分差异的最小值,官方称为 最小可觉差。还能够调整 kc、kh、kl 等使咱们精度更高。

5. 色彩差异总结

上面四种核算色彩差异的办法,精度顺序是: euclideanDistanceColorDifference < cie76ColorDifference < cie94ColorDifference < ciede2000ColorDifference 。 在拥有高精度的一起所耗费的时间也随之增加,可依据自己需求选择对应的办法。留意:咱们在核算色彩差异时,必定要将色彩转化为同一色彩空间,否则没有可比较性。

六、 实践使用

例如在色彩的泛红算法时,不运用色彩差异时,展现作用如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

咱们从图片上能够显着的看到填充有白边,这是目前许多软件都具有的作用。运用 idkit 供给的差异算法,完成的填充作用如下:

Flutter中道颜色(Color)的差异,你知道是如何计算的吗?

咱们发现作用很好,没有填充白边。

七、 总结

上文咱们介绍了 Flutter 中色彩的体现,一起也提及了 LAB 色彩的支撑而且供给了核算色彩差异的办法和一些方便的小功用。如果你觉得有帮助,请留下你的赞和谈论。