FlutterComponent最佳实践之取色我来实现

Posted 2022-03-26 eclipse_xu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了FlutterComponent最佳实践之取色我来实现相关的知识，希望对你有一定的参考价值。

点击上方蓝字关注我，知识会给你力量

构建个性化的UI是非常酷的。你的应用程序不需要对每个人都是一样的。一个轻松定制你的应用程序的方法是，从客户资料/封面照片中提取调色板。

它是这样做的。

首先，我们从一个网址上加载图片到byte list中。

imageBytes = (await NetworkAssetBundle(Uri.parse(photo)).load(photo))
      .buffer
      .asUint8List();

然后，我们导入Image lib，这样我们就可以访问每个像素，而不用担心图像的格式问题。

在下面的方法中，我访问了一个像素mesh，所以我可以从图像的不同部分挑选颜色。

List<Color> extractPixelsColors(Uint8List? bytes) 
  List<Color> colors = [];

  List<int> values = bytes!.buffer.asUint8List();
  imageLib.Image? image = imageLib.decodeImage(values);

  List<int?> pixels = [];

  int? width = image?.width;
  int? height = image?.height;

  int xChunk = width! ~/ (noOfPixelsPerAxis + 1);
  int yChunk = height! ~/ (noOfPixelsPerAxis + 1);

  for (int j = 1; j < noOfPixelsPerAxis + 1; j++) 
    for (int i = 1; i < noOfPixelsPerAxis + 1; i++) 
      int? pixel = image?.getPixel(xChunk * i, yChunk * j);
      pixels.add(pixel);
      colors.add(abgrToColor(pixel!));
    
  

  return colors;

如果noOfPixelsPerAxis是4的话，这个网格看起来就是这样。

img

在这个例子中，我们将提取16个像素。

好了，现在我们有16种颜色，但我们能用它们做什么呢？我们需要以某种方式对它们进行排序，所以我们可以提取调色板。

img

现在我们尝试将颜色从浅色到深色排序。我们使用computeLuminance方法，这个方法的计算成本很高，所以我们也许不应该在排序方法中进行计算（对每种颜色进行多次计算），但为了这个例子，这也是可以的。

List<Color> sortColors(List<Color> colors) 
  List<Color> sorted = [];

  sorted.addAll(colors);
  sorted.sort((a, b) => b.computeLuminance().compareTo(a.computeLuminance()));

  return sorted;

经过分类，我们的颜色看起来像这样。

img

开始时图像较亮（左上方，结束时图像较暗，右下方）。我把它们显示在一个网格中，所以它们可以很容易地放在屏幕上。

我们不需要调色板中的所有16种颜色，这太多了，所以让我们试着提取4种颜色。

为了做到这一点，我将把这个16种颜色的列表分成4个4种颜色的子列表，在每个子列表中找到平均颜色，这些平均颜色将成为我们最终调色板颜色列表中的项目。

Color getAverageColor(List<Color> colors) 
  int r = 0, g = 0, b = 0;

  for (int i = 0; i < colors.length; i++) 
    r += colors[i].red;
    g += colors[i].green;
    b += colors[i].blue;
  

  r = r ~/ colors.length;
  g = g ~/ colors.length;
  b = b ~/ colors.length;

  return Color.fromRGBO(r, g, b, 1);

平均颜色的计算方法是将所有的红色、蓝色和绿色成分加在一起，然后将总和除以所加颜色的数量。