Javascript - 排序rgb值 [英] Javascript - Sort rgb values
问题描述
使用javascript / jquery，我想将rgba值的数组排序为可见光谱的颜色。通过这样做，像阴影应该聚在一起。是否有插件来执行此操作或我将如何进行？
光谱图像： http://www.gamonline.com/catalog/colortheory/images/spectrum.gif
如果你的颜色数组是这样：
var rgbArr = c1，c2，c3，...]
/ code>是0到255之间的三个数字的数组
ci = [red，green，blue]
然后，您可以使用此函数将颜色转换为HSL
函数rgbToHsl（c）{
var r = c [0] / 255，g = c [1] / 255，b = c [2] / 255;
var max = Math.max（r，g，b），min = Math.min（r，g，b）;
var h，s，l =（max + min）/ 2;
if（max == min）{
h = s = 0; // achromatic
} else {
var d = max - min;
s = l> 0.5〜 d /（2-max-min）：d /（max + min）;
switch（max）{
case r：h =（g-b）/ d +（g
case b：h =（r-g）/ d + 4;打破;
}
h / = 6;
}
return new Array（h * 360，s * 100，l * 100）;
}
并按hue排序
$ b b
var sortedRgbArr = rgbArr.map（function（c，i）{
//转换为HSL并跟踪原始索引
return { rgbToHsl（c），index：i};
}）sort（function（c1，c2）{
//按hue排序
return c1.color [0] [0];
}）。map（function（data）{
//检索原始RGB颜色
return rgbArr [data.index];
}）;
下面是一个runnable示例（感谢IonicăBizău）：
function display（container，arr）{container = document.querySelector（container）; arr.forEach（function（c）{var el = document.createElement（div）; el.style.backgroundColor =rgb（+ c.join（，）+）; container.appendChild ）;}}}函数rgbToHsl（c）{var r = c [0] / 255，g = c [1] / 255，b = c [2] var max = Math.max（r，g，b），min = Math.min（r，g，b）; var h，s，l =（max + min）/ 2; if（max == min）{h = s = 0; // achromatic} else {var d = max-min; s = 1> 0.5〜 d /（2-max-min）：d /（max + min）;开关（最大）{情况r：h =（g-b）/ d +（g
#before& div，＃after> div {width：1％; height：20px; display：inline-block;}
随机颜色： div id =before>< / div>相同颜色，按hue排序：< div id =after>< / div>
sortedRgbArr 将包含rgb颜色 rgbArr 或多或少地像可见光谱的颜色。
问题是HSL光谱看起来像这样：
你的光谱是奇怪的，因为它没有所有的颜色，如粉红色。
我猜这是因为粉红色不存在的性质，的光谱的相反极端的颜色。但是我们在rgb中有它，所以你必须决定在哪里。
此外，你的频谱似乎从低到高，而不是频率。
取代 c1.color [0] - c2.color [0] 与 c2.color [0] - c1.color [0] 如果你想要它像你的频谱。
Using javascript/jquery, I want to sort an array of rgba values to the colours of the visible spectrum. By doing this, like shades should be bunched together. Is there a plugin to do this or how would I go about doing it?
Spectrum image: http://www.gamonline.com/catalog/colortheory/images/spectrum.gif
If your array of colors is like this:
var rgbArr = [c1, c2, c3, ...]
where each color ci is an array of three numbers between 0 and 255
ci = [red, green, blue]
then, you can use this function to convert the colors to HSL
function rgbToHsl(c) {
var r = c[0]/255, g = c[1]/255, b = c[2]/255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return new Array(h * 360, s * 100, l * 100);
}
and sort them by hue
var sortedRgbArr = rgbArr.map(function(c, i) {
// Convert to HSL and keep track of original indices
return {color: rgbToHsl(c), index: i};
}).sort(function(c1, c2) {
// Sort by hue
return c1.color[0] - c2.color[0];
}).map(function(data) {
// Retrieve original RGB color
return rgbArr[data.index];
});
Here is a runnable example (thanks Ionică Bizău):
function display(container, arr) {
container = document.querySelector(container);
arr.forEach(function(c) {
var el = document.createElement("div");
el.style.backgroundColor = "rgb(" + c.join(", ") + ")";
container.appendChild(el);
})
}
function rgbToHsl(c) {
var r = c[0] / 255,
g = c[1] / 255,
b = c[2] / 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return new Array(h * 360, s * 100, l * 100);
}
var rgbArr = [];
for (var i = 0; i < 100; ++i) {
rgbArr.push([
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256)
]);
}
display("#before", rgbArr);
var sortedRgbArr = rgbArr.map(function(c, i) {
// Convert to HSL and keep track of original indices
return {color: rgbToHsl(c), index: i};
}).sort(function(c1, c2) {
// Sort by hue
return c1.color[0] - c2.color[0];
}).map(function(data) {
// Retrieve original RGB color
return rgbArr[data.index];
});
display("#after", sortedRgbArr);
#before > div,
#after > div {
width: 1%;
height: 20px;
display: inline-block;
}
Random colors: <div id="before"></div>
Same colors, sorted by hue: <div id="after"></div>
sortedRgbArr will contain the rgb colors of rgbArr sorted more or less like the colors of the visible spectrum.
The problem is that the HSL spectrum looks like this:
Your spectrum is weird because it doesn't have all colors, such as pink.
I guess that's because pink doesn't exist in the nature, it's a combination of the colors of the opposite extremes of light's spectrum. But we have it in rgb, so you have to decide where do you want it.
Moreover, it seems that your spectrum goes from lower to higher wavelength, not frequency. But then your spectrum is a reverse of HSL's spectrum.
Replace c1.color[0] - c2.color[0] with c2.color[0] - c1.color[0] if you want it like your spectrum.
这篇关于Javascript - 排序rgb值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
