JQuery - получить белый или темный текст поверх цветового круга - PullRequest
Новая
       13

JQuery - получить белый или темный текст поверх цветового круга

1 голос
/ 22 сентября 2011

Эта проблема возникла, когда я посмотрел на почти идеальный фрагмент кода jQuery под названием Jar Two Wheel Color Picker:

http://www.jar2.net/projects/jquery-wheelcolorpicker/demo

Если вы заметили в их демо при перемещениипри наведении курсора на колесо, разработчик, похоже, использует алгоритм обратного цвета, который немного несовершенен.Я имею в виду, что если вы используете его и вставляете в 8072ff, вы получите то, что не можете прочитать в текстовом поле.

Я решил исправить алгоритм так, чтобы он показывался черным, когда светлеецвета, и белый, когда более темные цвета.

Я посмотрел на источник и нашел, где он обновляет цвет поля текстового поля.Там я могу получить значения цветов R, G и B от 0 до 255.

В Javascript и jQuery, зная значения R, G и B цвета фона,Как я могу переключить цвет переднего плана на белый или черный, чтобы его можно было прочитать?

Ответы [ 2 ]

2 голосов
/ 22 сентября 2011

Преобразование в hsl позволяет легко находить контрастные цвета -

, но для преобразования между rgb и hsl требуется немного.

В большинстве случаев это работает достаточно хорошо, но не будетзамени свой глаз. 

function bW(r){
//r must be an rgb color array of 3 integers between 0 and 255. 

    var contrast= function(B, F){
        var abs= Math.abs,
        BG= (B[0]*299 + B[1]*587 + B[2]*114)/1000,
        FG= (F[0]*299 + F[1]*587 + F[2]*114)/1000,
        bright= Math.round(Math.abs(BG - FG)),
        diff= abs(B[0]-F[0])+abs(B[1]-F[1])+abs(B[2]-F[2]);
        return [bright, diff];
    }
    var c, w= [255, 255, 255], b= [0, 0, 0];
    if(r[1]> 200 && (r[0]+r[2])<50) c= b;
    else{
        var bc= contrast(b, r);
        var wc= contrast(w, r);
        if((bc[0]*4+bc[1])> (wc[0]*4+wc[1])) c= b;
        else if((wc[0]*4+wc[1])> (bc[0]*4+bc[1])) c= w;
        else c= (bc[0]< wc[0])? w:b;
    }
    return 'rgb('+c.join(',')+')';
}
1 голос
/ 22 сентября 2011

Учитывая функции преобразования RGB / HSV из Майкла Джексона и этот бит HTML, с которым можно поиграть: 

<input type="text" id="pancakes">
<button id="margie">go</button>

Тогда что-то вроде этого может быть хорошей отправной точкой: 

$('#margie').click(function() {
    var bg  = $('#pancakes').val();
    var rgb = bg.match(/../g);
    for(var i = 0; i < 3; ++i)
        rgb[i] = parseInt(rgb[i], 16);
    var hsv = rgbToHsv(rgb[0], rgb[1], rgb[2]);
    var fg  = 'ffffff';
    if(hsv[2] > 0.5)
        fg = '000000';
    $('#pancakes').css({
        color: '#' + fg,
        background: '#' + bg
    });
});

Демонстрация: http://jsfiddle.net/ambiguous/xyA4a/

Возможно, вы захотите поиграть с hsv[2] > 0.5 и, возможно, взглянуть на оттенок и насыщенность, но для начала вам нужно просто проверить значение.Возможно, вы захотите поиграть с HSL , а не с HSV, и посмотрите, какой из них лучше для вас.

...