Flutter色彩空间转换插件delta_e的使用

DeltaE - Quantify Color Difference

DeltaE 插件提供了CIE色彩差异算法的Dart实现，这是对zschuessler的JavaScript DeltaE库的移植。您可以通过以下链接了解Delta E度量：Delta E学习。

如何使用它

这个包与原始的JavaScript版本在很多方面有所不同。您可以比较下面的代码与原库的使用它部分来了解两者的区别。

示例代码

import 'package:delta_e/delta_e.dart';

void main() {
  // 创建两个测试LAB颜色对象进行比较
  LabColor lab1 = LabColor(36, 60, 41);
  LabColor lab2 = LabColor(100, 40, 90);

  // 1976公式
  print(deltaE76(lab1, lab2)); // 83.04817878797824
  print(deltaE(lab1, lab2, algorithm: DeltaEAlgorithm.cie76)); // 83.04817878797824

  // 1994公式
  print(deltaE94(lab1, lab2)); // 67.97917774753019
  print(deltaE(lab1, lab2, algorithm: DeltaEAlgorithm.cie94)); // 67.97917774753019

  // 2000公式
  print(deltaE00(lab1, lab2)); // 56.85828292477247
  print(deltaE(lab1, lab2, algorithm: DeltaEAlgorithm.ciede2000)); // 56.85828292477247
}

顶层函数

• deltaE76(LabColor lab1, LabColor lab2)
  1976年公式是第一个将测量的颜色差异与已知的CIELAB坐标关联起来的公式。由于CIELAB空间没有预期的那样感知上均匀，尤其是在饱和区域，因此该公式已被1994年和2000年的公式取代。

• deltaE94(LabColor lab1, LabColor lab2, [ Weights weights = const Weights() ])
  1976年的定义通过引入基于汽车油漆测试容差数据的应用特定权重进行了扩展，以解决感知上的不均匀性问题，同时保留了CIELAB颜色空间。

• deltaE00(LabColor lab1, LabColor lab2, [ Weights weights = const Weights() ])
  由于1994年的定义未能充分解决感知上的均匀性问题，CIE对其定义进行了细化，添加了五项修正：

  • 色调旋转项，处理有问题的蓝色区域（色调角度在275°附近）
  • 补偿中性色（LCh差异中的引号值）
  • 补偿亮度
  • 补偿色度
  • 补偿色调

• deltaE(LabColor lab1, LabColor lab2, { DeltaEAlgorithm algorithm = DeltaEAlgorithm.ciede2000, Weights weights = const Weights() })
  通过传递一个指定公式的算法参数来调用上述三个函数的另一种方式。

类

• LabColor(double lightness, double chroma, double hue)
  表示CIELAB颜色空间中的颜色，所有顶层函数都需要它。亮度（L*）必须在0到100之间，色度（a*）在-128到128之间，色调（b*）也在-128到128之间。此类带有方便的工厂方法，可以从RGB、ARGB和RGBA值创建LabColor实例（忽略alpha）。

• Weights({ double lightness = 1, double chroma = 1, double hue = 1 })
  用于配置1994年和2000年公式的权重因子。所有因子都必须为正数。

枚举

• DeltaEAlgorithm
  表示DeltaE算法。可以是cie76、cie94或ciede2000。

测试

测试使用test包移植。您可以通过在包文件夹内运行以下命令来执行它们。

pub run test test/delta_e_test.dart

完整示例Demo

为了更直观地展示如何在Flutter项目中使用delta_e插件，下面是一个完整的示例：

pubspec.yaml

name: delta_e_example
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  delta_e: ^latest_version # 替换为最新版本

dev_dependencies:
  flutter_test:
    sdk: flutter
  test: any

main.dart

import 'package:flutter/material.dart';
import 'package:delta_e/delta_e.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DeltaE Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'DeltaE Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _deltaEValue = 0.0;
  String _algorithm = 'cie76';

  void _calculateDeltaE() {
    LabColor lab1 = LabColor(36, 60, 41);
    LabColor lab2 = LabColor(100, 40, 90);

    setState(() {
      switch (_algorithm) {
        case 'cie76':
          _deltaEValue = deltaE76(lab1, lab2);
          break;
        case 'cie94':
          _deltaEValue = deltaE94(lab1, lab2);
          break;
        case 'ciede2000':
          _deltaEValue = deltaE00(lab1, lab2);
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<String>(
              value: _algorithm,
              onChanged: (String? newValue) {
                setState(() {
                  _algorithm = newValue!;
                });
              },
              items: <String>['cie76', 'cie94', 'ciede2000']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value.toUpperCase()),
                );
              }).toList(),
            ),
            ElevatedButton(
              onPressed: _calculateDeltaE,
              child: Text('Calculate DeltaE'),
            ),
            SizedBox(height: 20),
            Text(
              'DeltaE Value: $_deltaEValue',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中使用delta_e插件来计算不同颜色之间的DeltaE值，并允许用户选择不同的算法进行计算。