将梯度映射到数值

map gradient to number value

本文关键字：映射      更新时间：2023-09-26

我需要在div/canvas或其他东西上绘制渐变。渐变将以一种颜色开始，以另一种颜色结束。所以只有两种颜色(以及中间的颜色)。假设它以白色开始，以黑色结束。

正在处理的应用程序调用返回1-100之间的数字的API。我认为渐变的宽度应该是100%，这样计算起来"容易"。

我从API得到的数字应该映射到渐变中的位置和十六进制代码，并返回这两个。

我该怎么做呢?有什么想法或代码吗?

如果我理解正确的话，你有:

startColor at 0%
endColor at 100%
chosenColor at x%

让我们假设你保存十六进制颜色如下(这里白色是startColor):

startColor.red = 255;
startColor.green = 255;
startColor.blue = 255;

计算两种颜色的差值:

diffColor.red = endColor.red - startColor.red;
diffColor.green = endColor.green - startColor.green;
diffColor.blue = endColor.blue - startColor.blue;

然后根据你的x值给startColor添加差值:

markerColor.red = startColor.red + diffColor.red * x / 100;
markerColor.green = startColor.green + diffColor.green * x / 100;
markerColor.blue = startColor.blue + diffColor.blue * x / 100;

如果你需要计算位置，它会以同样的方式:

markerPosition = startPosition + distance / x * 100

我不知道这是不是你要找的。我不知道你的问题是超级复杂还是真的很简单。

相关文章：