如何生成具有多个色标的线性渐变？答案

【问题标题】：How can linear gradients with multiple color stops be generated?如何生成具有多个色标的线性渐变？
【发布时间】：2017-07-10 02:57:49
【问题描述】：

假设我需要三种颜色之间的线性渐变。

rgb(255, 000, 000)
rgb(255, 255, 000)
rgb(000, 255, 000)

如何计算给定长度的单行的线性插值？所以像下面这样一个简单的行。

如果给定一个色标列表/数组，我如何创建一个函数，该函数从输入中输出另一个包含所有插值颜色值的数组？

上面的图像对我有用，但我需要能够生成这些 RGB 数组，在输入长度上具有多个色标。

或，另一种选择是返回基于色标数组和沿线的点的单一颜色样本的函数。

该函数看起来像：sample(stops[rgb...], point, length)

我尝试了几次，但因为我不知道如何开始而放弃了。我尝试将其视为三个独立色带的透视图，但仍然不太匹配。

我知道这是一个简单的数学脑块案例，而且这不是一个真正的编程特定问题，但我不知道还能问哪里。

P.S: 用任何合理的编程语言回答都可以。不过，不要试图用看起来像正则表达式模式的东西给出答案。

【问题讨论】：

标签： math colors interpolation gradient

【解决方案1】：

您应该在给定的间隔内对每个颜色分量进行线性插值。

让我们有 N 个区间，所以 N+1 个节点。节点包含 0..1 范围内的位置和 RGB 颜色。

RGBColor NodeColors[N+1]
Double NodePositions[N+1]

要在给定距离处获得颜色，您必须确定区间数 K。

如果画线从头到尾，只需将当前距离与 NodePositions 条目进行比较，并在需要时增加 K。

DistNorm = Dist / Length;

while (DistNorm > NodePositions[K])
    K++

如果你想在线上任意点，使用二分查找

  K = BinarySearch(DistNorm, NodePositions)

当你得到区间数时，计算这个区间的线性插值

 Red = NodeColors[K].Red + 
      (NodeColors[K+1].Red - NodeColors[K].Red) * 
      (DistNorm - NodePositions[K]) / 
      (NodePositions[K+1] - NodePositions[K]) 
same for Green, Blue

【讨论】：