17

嘿嘿，

我有一个温度小部件要在我正在进行的项目中实现。没有什么特别困难的，我有一个免费的 API 来检索我需要的数据等。

但是，和我一起工作的可爱设计师会有一个颜色功能，我不知道如何开始......

他会根据当前的天气温度定义背景颜色。

温度颜色模式

我的意思是如果温度很冷，比如-20，背景颜色应该是蓝色/紫色/任何冷色；当它温暖时，比如 25，它应该有一个像橙色/红色这样的热背景色。

我想我可以轻松地使用一系列“温度步骤”，但我更喜欢使用可以根据温度定义颜色的函数。我知道这很奇怪，我不知道是否有一种算法可以通过它的温度颜色来定义颜色......这篇文章很有帮助http://en.wikipedia.org/wiki/Color_temperature但相当复杂，如果有人有任何想法，即使是一开始，我也很感兴趣！

我看到了这个线程： 使用 C# 将温度显示为颜色？

但是我没有使用 C#，我也不想使用，所以如果 JavaScript 中有解决方案，那将是完美的。如果有服务器端需要，我最终可以使用 PHP 或 NodeJS。

编辑 - 答案：

最后，由于图形需要，我没有选择使用真正的颜色渐变数组。但我仍然必须根据温度混合最近台阶的颜色！我为此编写了一个小型 JS 库，您很快就能在 GitHub 上找到它，我将在此处发布链接。

你可以在这里找到它：

项目介绍网站

或者github项目

4

4 回答 4

7

您的颜色范围看起来与“HSL 颜色空间”中的“仅色调”扫描相同，从 -30ºC 的 270º（紫色）到 +30ºC 的 30º（橙色）

var hue = 30 + 240 * (30 - t) / 60;

如果t超出范围，则在调用上述表达式之前对其进行钳制，或者在之后将其钳制h到所需的色调范围。

在支持的浏览器上，您可以使用hsl(h, s, l)颜色字符串，或使用常用的“HSL 到 RGB”函数将 HSL 颜色转换为 RGB。

见http://jsfiddle.net/V5HyL/

于 2013-05-09T18:22:33.953 回答
3

这是一种特殊情况，不是通用解决方案，而是通过简单地在色调之间进行线性渐变并在中间范围（即绿色）中处理混合，您可以获得合理的近似值而无需颜色步进：

演示：http: //jsfiddle.net/bcronin/kGqbR/18/

//
// Function to map a -30 to 30 degree temperature to 
// a color
//
var F = function(t)
{
    // Map the temperature to a 0-1 range
    var a = (t + 30)/60;
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a);

    // Scrunch the green/cyan range in the middle
    var sign = (a < .5) ? -1 : 1;
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5;

    // Linear interpolation between the cold and hot
    var h0 = 259;
    var h1 = 12;
    var h = (h0) * (1 - a) + (h1) * (a);

    return pusher.color("hsv", h, 75, 90).hex6();
};
于 2013-05-09T19:08:48.787 回答
2

关于色温的维基百科文章与您的问题无关。维基百科文章仅与数字成像专家相关。在这种情况下，色温意味着不同的东西......

您的问题是关于如何以摄氏度为单位可视化某个温度。没有标准算法可以做到这一点。如何解决这个任务取决于设计师。

我可能会为每 2.5°C 或 5°C 构建一个 rgb 值数组，然后通过 rgb 混合以获取其间的温度值。

于 2013-05-09T18:15:12.607 回答
1

我最近遇到了一个难题，即使用时间数据来显示该时间对应的天空颜色。这很难，以下是我探索的三种方法：

1) 坏方法：分别为您的 R、G、B 通道创建一个函数，该函数将接受您的温度的 x 截距，并为您的红色通道、蓝色通道和绿色通道输出一个 y 截距。您拥有的温度范围和相应的颜色。为了做到这一点，我将通过沿颜色范围对温度的一些主要划分进行采样并绘制尽可能多的点，然后通过每个通道的点绘制 6 次多项式来对其进行逆向工程。你会得到一个函数，它可以接受一个温度值，并为 alpha 1 的 RGB 颜色的 R、G 和 B 通道组合 3 个输出。应该可以工作，但还没有测试过，我不愿意哈哈

2) 为每种主要颜色创建一个背景类（您决定这是 5 种颜色还是 50 种颜色）并使用 alpha 混合在它们之间切换。这就是我最终用于解决问题的方法。

if(temp > 0 && temp <= 5)
{
     greenBackground.alpha == 1
     yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)

ETC...

因此，如果您的温度是 2.5，那么它将是 50% 的黄色和绿色混合

我能够在 1 晚内实现此选项，结果看起来很棒！这很耗时，但可行，而且不像您想象的那么混乱。

3) 使用从渐变中采样的 RGB 颜色与所有可能的整数（-30 到 30 之间没有那么多）创建并存储一个数组，并在需要时将 API 的数据四舍五入为整数值。那将是我想的最简单的。绝对不如选项 1 酷:)

祝你好运！

于 2013-05-09T03:12:06.920 回答