使用 jquery ui 滑块通过 jquery 将 hsla 转换为 rgba

Question

我是 jquery ui 的新手。我最近做了一个项目，其中我有一些用于 hsla 颜色选择器的 jquery ui 滑块。我有一个最大值为 360（hsla 色调）的滑块。我想将 hsla 转换为 rgba。我在网上搜索，找到了一些将 hsla 转换为 rgba 的解决方案。但我不知道如何将它们与滑块值一起使用。所以我决定创建一个新的，我得到了将 hsla 转换为 rgba 的模式。

模式是：

当 hsla 色调值 =0 rgba 看起来像：rgba(255, 0, 0 ,1)。当 hsla 色调值 =60 时，rgba 看起来像：rgba(255, 255, 0 ,1)。这意味着，我需要将 rgba,sg(green) 值从 0 更改为 255，其中 hsla,s 色调滑块值在 0 到 60 之间。现在，我给出 hsla 值的完整列表 = rgba,s 值应该多少是：

1 = rgba(255, 4, 0 ,1)
2 = rgba(255, 9, 0 ,1)
3 = rgba(255, 13, 0 ,1)
4 = rgba(255, 17, 0 ,1)
5 = rgba(255, 21, 0 ,1)
6 = rgba(255, 26, 0 ,1)
7 = rgba(255, 30, 0 ,1)
8 = rgba(255, 34, 0 ,1)
9 = rgba(255, 38, 0 ,1)
10 = rgba(255, 43, 0 ,1)
11 = rgba(255, 47, 0 ,1)
12 = rgba(255, 51, 0 ,1)
13 = rgba(255, 55, 0 ,1)
14 = rgba(255, 60, 0 ,1)
15 = rgba(255, 64, 0 ,1)
16 = rgba(255, 68, 0 ,1)
17 = rgba(255, 72, 0 ,1)
18 = rgba(255, 77, 0 ,1)
19 = rgba(255, 81, 0 ,1)
20 = rgba(255, 85, 0 ,1)
21 = rgba(255, 89, 0 ,1)
22 = rgba(255, 94, 0 ,1)
23 = rgba(255, 98, 0 ,1)
24 = rgba(255, 102, 0 ,1)
25 = rgba(255, 106, 0 ,1)
26 = rgba(255, 110, 0 ,1)
27 = rgba(255, 115, 0 ,1)
28 = rgba(255, 119, 0 ,1)
29 = rgba(255, 123, 0 ,1)
30 = rgba(255, 128, 0 ,1)
31 = rgba(255, 132, 0 ,1)
32 = rgba(255, 136, 0 ,1)
33 = rgba(255, 140, 0 ,1)
34 = rgba(255, 145, 0 ,1)
35 = rgba(255, 149, 0 ,1)
36 = rgba(255, 153, 0 ,1)
37 = rgba(255, 157, 0 ,1)
38 = rgba(255, 162, 0 ,1)
39 = rgba(255, 166, 0 ,1)
40 = rgba(255, 170, 0 ,1)
41 = rgba(255, 174, 0 ,1)
42 = rgba(255, 179, 0 ,1)
43 = rgba(255, 183, 0 ,1)
44 = rgba(255, 187, 0 ,1)
45 = rgba(255, 191, 0 ,1)
46 = rgba(255, 195, 0 ,1)
47 = rgba(255, 200, 0 ,1)
48 = rgba(255, 204, 0 ,1)
49 = rgba(255, 208, 0 ,1)
50 = rgba(255, 213, 0 ,1)
51 = rgba(255, 217, 0 ,1)
52 = rgba(255, 221, 0 ,1)
53 = rgba(255, 225, 0 ,1)
54 = rgba(255, 229, 0 ,1)
55 = rgba(255, 234, 0 ,1)
56 = rgba(255, 238, 0 ,1)
57 = rgba(255, 242, 0 ,1)
58 = rgba(255, 247, 0 ,1)
59 = rgba(255, 251, 0 ,1)
60 = rgba(255, 255, 0 ,1)

here 我找到了我想要的。但我无法理解将 hsla 转换为 rgba 的源代码发生了什么。

这是我在 jsfiddle

上的代码

$( "#range-slider" ).slider({
range:false,
min: 0,
max: 360,
value: 0,
step: 1,
slide: function( event, ui ) {
    var num = ui.value;
    $('.hsla-code').text("hsla(" + num + ", 100%, 50%, 1)");
    if (num < 61) {
        var rgba = "rgba(255, "+ num * 4 + ", 0, 1)";
        $('.header').css({
            background: rgba
        });
        $('.code').text(rgba);
    } else if (num < 121) {
        var nua = num - 60;
        var nub = nua * 4;
        var red =  255 - nub;
        var rgba = "rgba("+ red +", 255, 0, 1)";
        $('.header').css({
            background: rgba
        });
        $('.code').text(rgba);
    } else if (num < 181) {
        var nua = num - 120;
        var blue = nua * 4;
        var rgba = "rgba(0, 255, " + blue + ", 1)";
        $('.header').css({
            background: rgba
        });
        $('.code').text(rgba);
    } else if (num < 241) {
        var nua = num - 180;
        var nub = nua * 4;
        var green =  255 - nub;
        var rgba = "rgba(0, " + green + ", 255, 1)";
        $('.header').css({
            background: rgba
        });
        $('.code').text(rgba);
    } else if (num < 301) {
        var nua = num - 240;
        var red = nua * 4;
        var rgba = "rgba("+ red +", 0, 255, 1)";
        $('.header').css({
            background: rgba
        });
        $('.code').text(rgba);
    } else if (num < 361) {
        var nua = num - 300;
        var nub = nua * 4;
        var blue = 255 - nub;
        var rgba = "rgba(255, 0, "+ blue +", 1)";
        $('.header').css({
            background: rgba
        });
        $('.code').text(rgba);
    }
}
});

Answer 1

查看 W3Schools 示例，他们使用以下函数将 HSL 转换为 RGB：

function hslToRgb(hue, sat, light) {
    var t1, t2, r, g, b;
    hue = hue / 60;        
    if ( light <= 0.5 ) {
        t2 = light * (sat + 1);
    } else {
        t2 = light + sat - (light * sat);
    }
    t1 = light * 2 - t2;
    r = hueToRgb(t1, t2, hue + 2) * 255;
    g = hueToRgb(t1, t2, hue) * 255;
    b = hueToRgb(t1, t2, hue - 2) * 255;
    return {r : r, g : g, b : b};
}

function hueToRgb(t1, t2, hue) {
    if (hue < 0) hue += 6;
    if (hue >= 6) hue -= 6;
    if (hue < 1) return (t2 - t1) * hue + t1;
    else if(hue < 3) return t2;
    else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
    else return t1;
}

在您的小提琴中，您正在使用滑块将色调从 0 调整到 360。这是我的工作示例：

https://jsfiddle.net/Twisty/q208xrrL/1/

JQuery

function hslToRgb(hue, sat, light) {
  var t1, t2, r, g, b;
  hue = hue / 60;
  if (light <= 0.5) {
    t2 = light * (sat + 1);
  } else {
    t2 = light + sat - (light * sat);
  }
  t1 = light * 2 - t2;
  r = hueToRgb(t1, t2, hue + 2) * 255;
  g = hueToRgb(t1, t2, hue) * 255;
  b = hueToRgb(t1, t2, hue - 2) * 255;
  return {
    r: Math.floor(r),
    g: Math.floor(g),
    b: Math.floor(b)
  };
}

function hueToRgb(t1, t2, hue) {
  if (hue < 0) hue += 6;
  if (hue >= 6) hue -= 6;
  if (hue < 1) return (t2 - t1) * hue + t1;
  else if (hue < 3) return t2;
  else if (hue < 4) return (t2 - t1) * (4 - hue) + t1;
  else return t1;
}

$("#range-slider").slider({
  range: false,
  min: 0,
  max: 360,
  value: 0,
  step: 1,
  slide: function(event, ui) {
    var hue = ui.value;
    var rgb = hslToRgb(hue, 1, .5);
    var rgba = "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", 1)";
    $('.header').css({
      background: rgba
    });
    $('.code').text(rgba);
    $('.hsla-code').text("hsla(" + hue + ", 100%, 50%, 1)");
  }
});

色相值应介于 0 到 360 之间。Sat.、Light 和 Alpha 使用 0.0 到 1.0（0 到 100 %）。所以当你使用它时，传递一个像hslToRgb(100, 1, .5); 这样的值。如果您决定制作 3 或 4 个滑块，这将很重要。