你如何组合颜色，就好像一种被涂在另一种上一样？

【问题标题】：How do you combine Colors as if one was Painted onto the other?你如何组合颜色，就好像一种被涂在另一种上一样？
【发布时间】：2020-04-17 01:09:06
【问题描述】：

我想基本上将两种颜色加在一起，就好像我要对 Canvas 对象执行以下操作一样：

canvas.drawPaint(Paint()..color = colorB);
canvas.drawPaint(Paint()..color = colorA);

基本上，我有一个背景颜色colorA 和另一种颜色colorB。我想得到一个 combinedColor，这将是在 colorB 上绘制 colorA 的结果，但 不使用画布。

我尝试了以下，但没有实现：

final combinedColor = colorA + colorB;

例如，如果我有一个半透明的colorA 和另一种颜色，我想在其上绘制colorA，那么另一种颜色应该作为背景，即好像它本身具有完全不透明度 - 基本上就是这样你会期待的。

如何将这样的颜色相加？

【问题讨论】：

【解决方案1】：

我碰巧在Color class找到了这个方法：

`Color.alphaBlend`

final colorC = Color.alphaBlend(colorA, colorB);

alphaBlend 允许您组合两种颜色，其中 first 参数是 foreground 颜色，second 是背景颜色。所以这里，colorA 是前景色，colorB 是背景色。

问题中的代码示例可以通过creating an extension 工作：

extension on Color {
  Color operator +(Color other) => Color.alphaBlend(this, other);
}

现在，以下代码将起作用：

final combinedColor = colorA + addendColor;

请注意，我创建扩展的方式，加数（此处为addendColor）将是背景。您可以通过将(this, other) 反转为(other, this) 来更改此设置。

【讨论】：