在二维数组中创建线性渐变

Question

我有一个类似于 2D 位图的数组，比如说 500*500 值。我正在尝试在数组上创建线性渐变，因此生成的位图看起来像这样（灰度）：

（来源： showandtell-graphics.com ）

输入将是要填充的数组、两个点（如 Photoshop/GIMP 中渐变工具的起点和终点）以及将使用的值范围。

我目前最好的结果是：

替代文字 http://img222.imageshack.us/img222/1733/gradientfe3.png

…这与我想要实现的目标相去甚远。它看起来更像是径向渐变。

创建这种渐变的最简单方法是什么？我将在 C++ 中实现它，但我想要一些通用算法。

原文由 Matěj Zábský 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的示例图像中，看起来您有一个径向渐变。这是我对您需要的步骤的即兴数学解释。抱歉，其他答案在实施方面更好。

1. 定义一个线性函数（如 y = x + 1），其域（即 x）从您想要开始的颜色到您想要结束的颜色。您可以根据 Ox0 到 OxFFFFFF（对于 24 位颜色）的范围来考虑这一点。如果你想处理亮度之类的事情，你必须对范围（即y值）做一些技巧。
2. 接下来，您需要在您拥有的矩阵上映射一个向量，因为这定义了颜色将更改的方向。此外，线性函数定义的颜色值将分配在向量的每个点上。向量的起点和终点还定义了 1 中域的最小值和最大值。您可以将向量视为渐变的一条线。
3. 对于矩阵中的每个单元格，可以从向量中为颜色分配一个值，其中单元格的垂线与向量相交。请参见下图，其中 c 是单元格的位置， 。是交点。如果你假装那个颜色在。是红色，那么这就是您将分配给单元格的内容。

             |
             C
             |
             |
    向量：____.______________
             |
             |

原文由 Dana the Sane 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

这确实是一个数学问题，因此它是否真的“属于” Stack Overflow 可能存在争议，但无论如何：您需要将图像中每个点的坐标投影到渐变轴上并使用该坐标来确定颜色。

在数学上，我的意思是：

1. 假设您的起点是 (x1, y1)，终点是 (x2, y2)
2. 计算 A = (x2 - x1) 和 B = (y2 - y1)
3. 计算起点 C1 = A * x1 + B * y1 C2 = A * x2 + B * y2 和终点—（ C2 应该大于 C1 ）
4. 对于图像中的每个点，计算 C = A * x + B * y
5. 如果 C <= C1 ，使用起始颜色；如果 C >= C2 ，使用结束颜色；否则，使用加权平均值：

(start_color * (C2 - C) + end_color * (C - C1))/(C2 - C1)

我做了一些快速测试来检查这是否基本有效。

原文由 David Z 发布，翻译遵循 CC BY-SA 2.5 许可协议