使用Javascript - 排序RGB值 [英] Javascript - Sort rgb values

问题描述

使用Javascript / jQuery的，我想排序RGBA值的可见光谱的颜色组成的数组。通过这样做，像浓淡应一起成束。是否有一个插件来做到这一点还是我怎么会去这样做？

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?

光谱图像： http://www.gamonline.com/catalog/colortheory /images/spectrum.gif

推荐答案

如果您数组是这样的：

var rgbArr=[c1,c2,c3,...]

其中，

c1,c2,...=[red,green,blue]

您可以使用

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 hslArr=new Array();
for(var i=0;i<rgbArr.length;i++){
    //Transforming rgb to hsl
    //`hslArr[i][1]` (`i`) is a reference to the rgb color, in order to retrieve it later
    hslArr[i]=[rgbToHsl(rgbArr[i]),i]; 
}
var sortedHslArr=new Array();
//Sorting `hslArr` into `sortedHslArr`
outerloop:
for(var i=0;i<hslArr.length;i++){
    for(var j=0;j<sortedHslArr.length;j++){
        if(sortedHslArr[j][0][0]>hslArr[i][0][0]){
            sortedHslArr.splice(j,0,hslArr[i]);
            continue outerloop;
        }
    }
    sortedHslArr.push(hslArr[i]);
}
var sortedRgbArr=new Array();
//Retrieving rgb colors
for(var i=0;i<sortedHslArr.length;i++){
    sortedRgbArr[i]=rgbArr[sortedHslArr[i][1]];
}

和 sortedRgbArr 是RGB排列排序可见光谱的颜色。

And sortedRgbArr is your rgb array sorted to the colours of the visible spectrum.

修改

问题是，HSL频谱看起来是这样的：

The problem is that the HSL spectrum looks like this:

您频谱是奇怪，因为它不具有所有的颜色，如粉红。

Your spectrum is weird because it doesn't have all colors, such as pink.

我想这是因为粉红色不会在自然界中存在，它的光的光谱的极端相反的颜色组合。但是，我们有它在RGB，所以你必须决定你想要它。

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.

此外，看来你去的频谱从低级到高级的波长，而不是频率。但是，那么你的频谱是HSL的频谱的逆转。

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.

所以，如果你想让它像你的频谱，改变这一行：

So if you want it like your spectrum, change this line:

sortedHslArr[j][0][0]>hslArr[i][0][0]

到

sortedHslArr[j][0][0]<hslArr[i][0][0]

这篇关于使用Javascript - 排序RGB值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！