Javascript: 将 HSV 转换为 RGB，输出正确但打乱

Question

我使用在 Wikipedia 上找到的公式构建了一个将 RGB 转换为 HSV 的函数。虽然输出中的数字看起来是正确的，但它们的位置不断变化，具体取决于哪个更大。

示例：

   Given HSV: [204, 100,  94]
Expected RGB: [  0, 144, 240]
  Output RGB: [240,   0, 144]

   Given HSV: [240, 100,  94]
Expected RGB: [  0,   0, 240]
  Output RGB: [240,   0,   0]

   Given HSV: [120, 100,  94]
Expected RGB: [  0, 240,   0]
  Output RGB: [240,   0,   0]

这一个是唯一正确的，因为红色恰好是最大的数字：

   Given HSV: [  0, 100,  94]
Expected RGB: [240,   0,   0]
  Output RGB: [240,   0,   0]

函数如下：

function hsvRGB(h, s, v) {
    h /= 60, s /= 100, v /= 100;    // Convert [deg, %, %] to ranges 0-6, 0-1, 0-1

    var r, g, b;                    // Set up for later
    var r1, g1, b1;                 // Set up for later

    var c = v*s;                    // Chroma

    var x = c*(1-Math.abs(h%2-1));

    if ( h <= 0 )       [r1, g1, b1] = [0, 0, 0];
    if ( 0 <= h <= 1 )  [r1, g1, b1] = [c, x, 0];
    if ( 1 < h <= 2 )   [r1, g1, b1] = [x, c, 0];
    if ( 2 < h <= 3 )   [r1, g1, b1] = [0, c, x];
    if ( 3 < h <= 4 )   [r1, g1, b1] = [0, x, c];
    if ( 4 < h <= 5 )   [r1, g1, b1] = [x, 0, c];
    if ( 5 < h <= 6 )   [r1, g1, b1] = [c, 0, x];
    var m = v-c;
    [r, g, b] = [r1 + m, g1 + m, b1 + m];

    return [r*255, g*255, b*255];   // Output 0-255 instead of 0-1
}

我一直在根据维基百科上的公式检查并重新检查我的函数，但我看不到它所做的任何事情，但我已经研究了很长时间以至于我可能只需要第二双眼睛。

Answer 1

首先，最重要的问题是，虽然

if ( 0 <= h <= 1 )

看起来很合理，但并不像人们想象的那样有效。 JavaScript 将其解释为

if ((0 <= h) <= 1)

JavaScript 比较运算符 return 布尔结果，因此虽然它 语法上 正确，但它做的事情与检查 h 是否正确完全不同在 0 和 1 之间。

因为该算法使用输入值的 H 角在六种不同场景中进行选择，所以整个事情可以用 switch 语句（如对问题发表评论）。首先，编写的代码处理了 h 为负的情况，这很好，但由于它是一个 angular 值，所以将它强制放入范围 [0, 360):

function hsvRGB(h, s, v) {
    while (h < 0) h += 360; // could be smarter but just for illustration
    h = h % 360;
    h /= 60, s /= 100, v /= 100;    // Convert [deg, %, %] to ranges 0-6, 0-1, 0-1

所以现在 h 在 0 和 6 之间；它可能是 0，但永远不会是 6。然后我们可以使用switch来区分大小写：

    switch (Math.floor(h)) {
      case 0: [r1, g1, b1] = [c, x, 0]; break;
      case 1: [r1, g1, b1] = [x, c, 0]; break;
      case 2: [r1, g1, b1] = [0, c, x]; break;
      case 3: [r1, g1, b1] = [0, x, c]; break;
      case 4: [r1, g1, b1] = [x, 0, c]; break;
      case 5: [r1, g1, b1] = [c, 0, x]; break;
    }

Javascript: 将 HSV 转换为 RGB，输出正确但打乱

Javascript: Converting HSV to RGB, output correct but shuffled

javascript

colors

rgb

hsv