Question

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

当hsla hue value = 0时，rgba看起来像：rgba（255,0,0,1）。当hsla hue值= 60时，rgba看起来像：rgba（255,255,0,1）。这意味着，我需要将hgla中的rgba，sg（绿色）值从0更改为255，s hue滑块值介于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: 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)");
  }
});

在你的小提琴中，你可以使用滑块将Hue从0调整到360。这是我的工作示例：

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

<强> JQuery的

hslToRgb(100, 1, .5);

Hue值应为0到360.Sat.，Light和Alpha使用0.0到1.0（0到100％）。因此，当您使用它时，传递像{{1}}这样的值。如果您决定制作3个或4个滑块，这一点很重要。

使用jquery ui slider

1 个答案: