Question

我想根据整数X（正投票数）确定背景颜色C

好的，我可以做到

if(x==0) c = '#000';
else if(x > 0 && x < 5 ) c = '#001'
else if(X<=5 <= 20) c = '#002';
//and so on...

但是，我怎么能这样做才能逐步实现呢？我的意思是0到500票 - ＆gt; 500色蓝色？（如果我没错其HEX的两位数字（如果没有，15 * 15 xD））

有什么想法吗？

Answer 1

因为你只是在寻找想法，所以这里没有其他人会建议。首先，查看“Catmull-Rom Spline”公式。它归结为一个非常简单的矩阵乘法技巧，它给出了一个给定一组控制点计算曲线的公式。

好了，现在您已经了解了Catmull-Rom样条曲线的所有内容，您可以编写一些代码来在3空间中创建曲线。那么，如果不是三维空间，RGB是什么？因此，您选择一些好的颜色控制点（RGB颜色），然后使用方便的Catmull-Rom实现生成所有这些颜色的参数曲线，沿着曲线可以根据需要添加多种颜色。

关于颜色进展的一个很酷的事情是它们在过渡期间真的“平滑”。

Answer 2

我可能会使用类似的东西：

var blueness = x / 2;
if (blueness > 255) blueness = 255;
rgb(0, 0, blueness);

但你可以使用this sprintf implementation并像使用任何其他语言一样使用它来转换为十六进制。

Answer 3

在您的网页上添加raphaeljs并将代码中的函数estimateColorForValue()和toHex()粘贴到某处。 estimateColorForValue(hue, value, darkestValue, brightestValue)计算某些值的颜色，通过查看[darkestValue-brightestValue] value范围内的位置来插值颜色。 hue的范围为[0-1]：0.1，橙色为棕色，0.4为绿色，0.8为粉红色，中间有更多颜色。色调的微小变化会彻底改变视觉颜色。

例如：estimateColorForValue(.1, 15, 1, 20)，可以解释为，对于范围为1到20的数据，在orangy空间中计算值15的颜色。

toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

代码：

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>

<script>

function toHex(hsb) {
  return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex;
}

function estimateColorForValue(hue, value, darkestValue, brightestValue) {
  // Constants to determine saturation and brightness
  var darkBrightness = 0.6;
  var brightBrightness = 1;
  var darkSaturation = 0.3;
  var brightSaturation = 1;

  // Compute saturation and brightness:
  var gradient = (value - darkestValue) / (brightestValue - darkestValue);
  var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation);
  var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness);

  return {h: hue, s:saturation, b:brightness};
}
</script>

确定规则：将整数值与颜色#RGB相关联

3 个答案: