将值映射到色标

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将值映射到色标相关的知识,希望对你有一定的参考价值。

我有一个值列表,应该绘制到具有特定颜色的地图。对地图的绘图已经完成,但我需要找出一种方法将值n映射到表示其值的颜色。

到目前为止,一个例子和我的解决方案是基于minmax对值进行标准化,然后将它们分配给最低的六角色0和最高的255。这当然限制了我自己的灰度。这是代码:

$color = ($value / $max) * 255    // (min is zero)

但是,如果值应该从蓝色变为红色,如何做到这一点?是否有任何可以解决此问题的通用库或工具?到目前为止,我还没能找到任何一个。

答案

可能有lib可以做到这一点。但是,让我们对一般原则进行简短的热身。一般来说,您有以下选择:

  1. 预定义的颜色索引,例如, $coloridx=array(0=>'#FFFFFF',1=>'#FFEE00',...);
  2. 任何算法,例如线性梯度,基本上是所有三个RGB通道的基于迭代的自适应(R =红色,G =绿色,B =蓝色)。
  3. 两者的组合,通常将任何复杂算法的结果放入颜色索引,然后从那里开始。

如果您在考虑中包含算法,则必须了解没有truefalse。这一切都取决于你想要实现什么。在某些情况下,将绿色的变化渲染到n=0..10然后在n>10之外的所有东西中都变成红色到黑色是有意义的。上限和乘数有助于设置重音。像这样的东西。

实现线性渐变的一种方法是:

function lineargradient($ra,$ga,$ba,$rz,$gz,$bz,$iterationnr) {
  $colorindex = array();
  for($iterationc=1; $iterationc<=$iterationnr; $iterationc++) {
     $iterationdiff = $iterationnr-$iterationc;
     $colorindex[] = '#'.
        dechex(intval((($ra*$iterationc)+($rz*$iterationdiff))/$iterationnr)).
        dechex(intval((($ga*$iterationc)+($gz*$iterationdiff))/$iterationnr)).
        dechex(intval((($ba*$iterationc)+($bz*$iterationdiff))/$iterationnr));
  }
  return $colorindex;
}

$colorindex = lineargradient(
  100, 0, 0,   // rgb of the start color
  0, 255, 255, // rgb of the end color
  256          // number of colors in your linear gradient
);

$color = $colorindex[$value];

我更新了代码以添加dechex,它反馈了注释。

另一答案

颜色值是表示。数字颜色以及十六进制颜色。 “非灰度”颜色包含至少2种不同的信息:红色值,绿色值或蓝色值可能不同。对其表示执行操作会产生错误的结果。然后必须对每条信息执行“映射”。您需要提取红色,绿色和蓝色值,单独执行映射,然后构建结果颜色的表示。这是一个使用“最小颜色”的快速帮助器“和”max color“,根据您需要使用的”n“值执行红色,绿色和蓝色值的映射,然后以十六进制字符串返回结果颜色。它适用于任何颜色或灰度颜色。

function linear_color($from, $to, $ratio) {
        // normalize ralio
        $ratio = $ratio<0?0:($ratio>1?1:$ratio);
        // unsure colors are numeric values
        if(!is_numeric($from))$from=hexdec($from);
        if(!is_numeric($to))$to=hexdec($to);

        $rf = 0xFF & ($from >> 0x10);
        $gf = 0xFF & ($from >> 0x8);
        $bf = 0xFF & $from;
        $rt = 0xFF & ($to >> 0x10);
        $gt = 0xFF & ($to >> 0x8);
        $bt = 0xFF & $to;
        return str_pad( dechex(($bf + (($bt-$bf)*$ratio)) + ($gf + (($gt-$gf)*$ratio) << 0x8) + ($rf + (($rt-$rf)*$ratio) << 0x10)), 6,'0',STR_PAD_LEFT);
}

只需指定2种颜色作为数值或十六进制字符串(无哈希!),如下所示:

$color_from = hexdec('c2c2c2');
$color_to = hexdec('1eb02b');
for($i=-0.2; $i<=1.3; $i+=0.04){
        echo '<div style="background-color: #';
        echo linear_color($color_from, $color_to, $i);
        echo '">';
        echo 'Result color when n = <strong>'.$i.'</strong>';
        echo '</div>';
    }
另一答案

另一个答案非常有用。我决定使用JS,因为它减少了服务器负载。要求也发生了变化。酒吧必须从中间的红色变为白色,然后从白色变为黄色。如果值为0,则应为黑色。这是我遇到类似情况的人的代码。

var normalize_base = 2*255;
var no_con_color = "black";

function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;

    while (hex.length < padding) {
        hex = "0" + hex;
}

    return hex;
}

function normalize(max, min, value)
{
     var normalized = (value - min) / (max - min) ;
     return Math.floor(normalized * normalize_base);
}

function value2Color(value)
{
    if(value <= 0 || value == undefined)
    {
        return no_con_color;
    }
    var g = 0;
    var b = 0;
    var r = 0;
    if(value < 255)
    {
        r = 255;
        g = value;
        b = value;
    } else {
        r = (2*255) - value;
        g = 255;
        b = (2*255) - value;
    }  

    return "#" + decimalToHex(r) + decimalToHex(g) +  decimalToHex(b);
}
另一答案

这有I2UI

<div data-i2="color:['#404040','#00FF21']">
    <span data-i2="rate:1">A</span>
    <span data-i2="rate:2">B</span>
    <span data-i2="rate:3">C</span>
    <span data-i2="rate:4">D</span>
    <span data-i2="rate:5">E</span>
</div>

有一个颜色范围:从“灰色”到“绿色”。具有最低速率值的span元素获得“Gray”颜色,具有最大速率的元素获得“Green”颜色。

因此,边缘之间的跨度获得与其速率成正比的颜色。

此外,在加载前一个html之后调用javascript i2.emph()。

demo

另一答案

这是一个仅用于函数的代码,用于将任何给定范围内的任何数字(例如[0,20])转换为特定颜色,其中0为红色,10为黄色,20为绿色。你可以使用任何颜色甚至使用4种颜色的组合,所以它是红色 - 黄色 - 绿色 - 蓝色。

请参阅gist文件的末尾,其中使用了此函数。

Demo

请注意代码:Click here

以上是关于将值映射到色标的主要内容,如果未能解决你的问题,请参考以下文章

将值从回收器适配器传递到android中的片段

如何将值从一个片段的回收器视图项传递到另一个片段

如何将值从片段/活动传递到 xml?

java 将值/日期从活动传递到片段

如何将值映射到python中的模糊项

如何将值从一个活动中的片段传递到另一个活动? [复制]