Flutter颜色模型处理插件color_models的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter颜色模型处理插件 color_models 的使用

color_models 是一个用于定义和操作多种颜色空间(如CMYK、HSI、HSL、HSP、HSB、LAB、Oklab、RGB和XYZ)的Flutter插件。它提供了颜色转换、调整以及生成新颜色的功能。

安装

首先,在你的pubspec.yaml文件中添加依赖:

dependencies:
  color_models: ^latest_version

然后运行flutter pub get来安装依赖。

使用示例

导入包

在开始之前,确保导入了color_models包:

import 'package:color_models/color_models.dart';

创建颜色

你可以通过直接构造函数或使用fromListextrapolate方法来创建颜色。下面是一些例子:

RGB颜色

// RGB没有透明度
RgbColor rgb1 = RgbColor(255, 0, 0);
RgbColor rgb2 = RgbColor.fromList([255, 0, 0]);
RgbColor rgb3 = RgbColor.extrapolate([1.0, 0.0, 0.0]);

// RGB带有透明度
RgbColor rgba1 = RgbColor(255, 0, 0, 1.0);
RgbColor rgba2 = RgbColor.fromList([255, 0, 0, 255]);
RgbColor rgba3 = RgbColor.extrapolate([1.0, 0.0, 0.0, 1.0]);

CMYK颜色

// CMYK没有透明度
CmykColor cmyk1 = CmykColor(0.0, 100.0, 100.0, 0.0);
CmykColor cmyk2 = CmykColor.fromList([0.0, 100.0, 100.0, 0.0]);
CmykColor cmyk3 = CmykColor.extrapolate([0.0, 1.0, 1.0, 0.0]);

// CMYK带有透明度
CmykColor cmyka1 = CmykColor(0.0, 100.0, 100.0, 0.0, 1.0);
CmykColor cmyka2 = CmykColor.fromList([0.0, 100.0, 100.0, 0.0, 255]);
CmykColor cmyka3 = CmykColor.extrapolate([0.0, 1.0, 1.0, 0.0, 1.0]);

颜色转换

每个颜色模型都有方法可以转换为其他颜色模型。例如:

var originalColor = HsbColor(0.3, 0.8, 0.7);

// 转换为RGB
var rgbColor = RgbColor.from(originalColor); // RgbColor(64, 179, 36)

// 再转换为CMYK
var cmykColor = CmykColor.from(rgbColor); // CmykColor(64.25, 0, 79.89, 29.8)

// 最后转回HSB
var hsbColor = HsbColor.from(cmykColor); // HsbColor(0.3, 0.8, 0.7)

颜色调整

color_models 提供了一些便捷的方法来进行颜色调整,比如反转颜色、旋转色调等。

final orange = RgbColor(255, 144, 0);

// 反转颜色
print(orange.inverted); // RgbColor(0, 111, 255)

// 旋转色调30度
print(orange.rotateHue(30)); // RgbColor(239, 255, 0)

// 更暖色调
print(orange.warmer(30)); // RgbColor(239, 255, 0)

// 更冷色调
print(orange.cooler(30)); // RgbColor(255, 17, 0)

颜色插值

你可以使用lerpTo方法在两个颜色之间进行插值。

final red = RgbColor(255, 0, 0);
final blue = RgbColor(0, 0, 255);

// 计算5个颜色,包括原始颜色和中间的3步
final colors = red.lerpTo(blue, 3);
print(colors); // [RgbColor(255, 0, 0), RgbColor(191, 0, 64), RgbColor(128, 0, 128), RgbColor(64, 0, 191), RgbColor(0, 0, 255)]

颜色调色板增强

你还可以使用augment方法来增强颜色调色板。

final palette = <ColorModel>[
  RgbColor(255, 0, 0),
  RgbColor(0, 255, 0),
  RgbColor(0, 0, 255),
];

// 增强到5个颜色
final newPalette = palette.augment(5);
print(newPalette); // [RgbColor(255, 0, 0), RgbColor(128, 128, 0), RgbColor(0, 255, 0), RgbColor(0, 128, 128), RgbColor(0, 0, 255)]

以上是color_models插件的基本使用方法。通过这个插件,你可以方便地在不同的颜色空间之间进行转换,并对颜色进行各种调整和操作。希望这些信息对你有所帮助!


更多关于Flutter颜色模型处理插件color_models的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter颜色模型处理插件color_models的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用color_models插件来处理颜色模型的示例代码。color_models插件允许你在不同的颜色模型(如RGB、HEX、HSL、HSV、CMYK等)之间进行转换。

首先,你需要在你的pubspec.yaml文件中添加color_models依赖:

dependencies:
  flutter:
    sdk: flutter
  color_models: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来获取依赖包。

接下来,这里是一个示例代码,展示了如何使用color_models插件进行颜色模型的转换:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color Models Example'),
        ),
        body: ColorModelsExample(),
      ),
    );
  }
}

class ColorModelsExample extends StatefulWidget {
  @override
  _ColorModelsExampleState createState() => _ColorModelsExampleState();
}

class _ColorModelsExampleState extends State<ColorModelsExample> {
  Color? _selectedColor;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Select a color (HEX):', style: TextStyle(fontSize: 20)),
          SizedBox(height: 16),
          TextField(
            decoration: InputDecoration(labelText: 'HEX Color'),
            keyboardType: TextInputType.text,
            onChanged: (value) {
              if (value.startsWith('#') && value.length == 7) {
                try {
                  int hexColor = int.parse(value.substring(1), radix: 16);
                  setState(() {
                    _selectedColor = Color(hexColor);
                  });
                } catch (e) {
                  // Handle invalid HEX input
                }
              }
            },
          ),
          SizedBox(height: 32),
          if (_selectedColor != null) {
            Text('Selected Color:', style: TextStyle(fontSize: 20)),
            SizedBox(height: 8),
            ColorSwatch(color: _selectedColor!),
            SizedBox(height: 16),
            Text('RGB: ${_selectedColor!.red}, ${_selectedColor!.green}, ${_selectedColor!.blue}'),
            SizedBox(height: 8),
            Text('HEX: #${_selectedColor!.value.toRadixString(16).toUpperCase().padStart(6, '0')}'),
            SizedBox(height: 16),
            Text('HSL: '),
            SizedBox(height: 8),
            hslToString(rgbToHsl(_selectedColor!.red, _selectedColor!.green, _selectedColor!.blue)),
            SizedBox(height: 16),
            Text('HSV: '),
            SizedBox(height: 8),
            hsvToString(rgbToHsv(_selectedColor!.red, _selectedColor!.green, _selectedColor!.blue)),
          }
        ],
      ),
    );
  }

  // Helper functions to convert RGB to HSL and HSV, and to format the output
  List<double> rgbToHsl(int r, int g, int b) {
    r /= 255.0;
    g /= 255.0;
    b /= 255.0;
    double cmax = max(r, max(g, b));
    double cmin = min(r, min(g, b));
    double delta = cmax - cmin;

    double h = 0.0;
    double s = 0.0;
    double l = (cmax + cmin) / 2.0;

    if (delta == 0) {
      h = 0;
    } else if (cmax == r) {
      h = ((g - b) / delta) % 6;
    } else if (cmax == g) {
      h = ((b - r) / delta) + 2;
    } else if (cmax == b) {
      h = ((r - g) / delta) + 4;
    }

    h = h * 60;
    if (h < 0) h += 360;

    s = (cmax == 0) ? 0 : delta / (1 - abs(2 * l - 1));
    s = (s * 100).roundToDouble() / 100;
    l = (l * 100).roundToDouble() / 100;

    return [h, s, l];
  }

  List<double> rgbToHsv(int r, int g, int b) {
    r /= 255.0;
    g /= 255.0;
    b /= 255.0;
    double cmax = max(r, max(g, b));
    double cmin = min(r, min(g, b));
    double delta = cmax - cmin;

    double h = 0.0;
    double s = 0.0;
    double v = cmax;

    if (delta == 0) {
      h = -1;
    } else if (cmax == r) {
      h = ((g - b) / delta) % 6;
    } else if (cmax == g) {
      h = ((b - r) / delta) + 2;
    } else if (cmax == b) {
      h = ((r - g) / delta) + 4;
    }

    h = h * 60;
    if (h < 0) h += 360;

    s = (cmax == 0) ? 0 : delta / cmax;
    s = (s * 100).roundToDouble() / 100;
    v = (v * 100).roundToDouble() / 100;

    return [h, s, v];
  }

  String hslToString(List<double> hsl) {
    return 'H: ${hsl[0].toInt()}, S: ${hsl[1].toStringAsFixed(1)}%, L: ${hsl[2].toStringAsFixed(1)}%';
  }

  String hsvToString(List<double> hsv) {
    return 'H: ${hsv[0].toInt()}, S: ${hsv[1].toStringAsFixed(1)}%, V: ${hsv[2].toStringAsFixed(1)}%';
  }
}

在上面的代码中,我们:

  1. 添加了一个TextField来输入HEX颜色值。
  2. 使用Color类来解析输入的HEX值并更新选中的颜色。
  3. 展示了如何将选中的颜色从RGB转换为HSL和HSV,并格式化输出。

请注意,上面的代码示例中,RGB到HSL和HSV的转换函数是手动实现的,而color_models插件实际上已经提供了这些转换函数。你可以直接使用插件中的函数来替代手动实现的转换函数,以获得更简洁和准确的代码。

为了使用color_models插件中的函数,你可以这样修改上面的代码:

import 'package:color_models/color_models.dart' as colorModels;

// ...

// 使用colorModels插件中的转换函数
List<double> hsl = colorModels.rgbToHsl(_selectedColor!.red, _selectedColor!.green, _selectedColor!.blue);
List<double> hsv = colorModels.rgbToHsv(_selectedColor!.red, _selectedColor!.green, _selectedColor!.blue);

// 格式化输出
String hslString = 'H: ${hsl[0].toInt()}, S: ${(hsl[1] * 100).toStringAsFixed(1)}%, L: ${(hsl[2] * 100).toStringAsFixed(1)}%';
String hsvString = 'H: ${hsv[0].toInt()}, S: ${(hsv[1] * 100).toStringAsFixed(1)}%, V: ${(hsv[2] * 100).toStringAsFixed(1)}%';

希望这能帮助你理解如何在Flutter中使用color_models插件来处理颜色模型!

回到顶部