时间戳

首页 > 解决方案 > 尝试在javascript中更改RGB颜色

javascript - 尝试在javascript中更改RGB颜色

问题描述

我正在尝试制作一个使用 javascript 更改灯光颜色的脚本。所以首先我想使用当前的 RGB 值来检查一个数组，然后如果有匹配则选择下一个。但是由于我没有所有可能的组合，如果没有完全匹配，我想找到最接近的可能匹配。这是我到目前为止所尝试的。

kelvin_table = [
  {r:255,g:56,b:0},
  {r:255,g:71,b:0},
  {r:255,g:83,b:0}
  ];
    
  var red = 255
  var green = 84
  var blue = 0
  index = kelvin_table.findIndex(x => x.r ===red && x.g ===green && x.b ===blue);

  alert(index);
  
  if (index = -1)
  {
    alert("In de If Statement");  
    var Redindex = [], i;    
    for(i = 0; i < kelvin_table.length; i++)
        if (kelvin_table[i].r === red)
            Redindex.push(i);
    alert(Redindex);
    var Greenindex = [], i2;
    for(i2 = 0; i2 < Redindex.length; i2++)
        //alert(Redindex[i2]);
        var gi = Redindex[i2];
        alert(gi);
        if (kelvin_table[gi].g === green)
            Greenindex.push(i);
    alert(Greenindex);
    var Blueindex = [], i3;
    for(i3 = 0; i3 < Greenindex.length; i3++)
        //alert(Greenindex[i3]);
        var bi = Greenindex[i3];
        alert(bi);
        if (kelvin_table[bi].b === blue)
            Blueindex.push(i);
    alert(Blueindex);
  }
  
  var valueAtIndex1 = kelvin_table[2];
  alert(valueAtIndex1.g);

当然 kelvin_table 最后会大得多，但这是我的测试量。正如你所期望的那样，我得到了低于红色、绿色和蓝色值的 Index -1。如果我有绿色 83，我会得到索引 2，所以该部分有效。但现在我为 index = -1 添加了一个 If 语句。到目前为止，我的方法一直试图通过首先搜索红色值，然后搜索红色结果中的绿色值，然后从蓝色中搜索过滤列表中的蓝色结果来缩小索引。最终我希望这只会给我一个选择。我在想如果没有匹配，就像下面的例子中的蓝色，然后尝试搜索值 -1，然后 +1、-2、+2...直到有匹配的值。我只是不确定如何解决这个问题。也许有人有更好的方法来找到最接近的匹配项。

提前致谢

标签： javascript

解决方案

问题是您没有在绿色和蓝色的 for 中输入“{”或“}”。

但我不明白 if 中的代码有什么意义，它与：kelvin_table.findIndex(x => xr ===red && xg ===green && xb ===blue);

如果您尝试找到最接近的颜色，您可以使用此代码closestIndex({r:red,g:green,b:blue}, kelvin_table)

function colorDistance(c0, c1) {
  var dr = c1.r - c0.r;
  var dg = c1.g - c0.g;
  var db = c1.b - c0.b;
  return Math.sqrt(dr * dr + dg * dg + db * db);
}

function closestIndex(color, kelvin_table) {
  var minIndex = -1;
  var minDistance = Infinity;
  for (var i = 0; i < kelvin_table.length; i++) {
    var distance = colorDistance(color, kelvin_table[i]);
    if (distance <= minDistance) {
      minIndex = i;
      minDistance = distance;
    }
  }
  return minIndex;
}

注意：我在这里使用了一个惰性版本的 colorDistance

推荐阅读