Цикл кажется законченным, хотя ожидание сбрасывается - PullRequest
Новая
       10

Цикл кажется законченным, хотя ожидание сбрасывается

1 голос
/ 03 мая 2019

У меня есть объект: 

var $neutrals = [
    {label : "Neutrals 1", value : "#ffffff", type : "color"},
    {label : "Neutrals 2", value : "#f8f8f8", type : "color"},
    {label : "Neutrals 3", value : "#d9d9d9", type : "color"},
    {label : "Neutrals 4", value : "#b2b3b7", type : "color"},
    {label : "Neutrals 5", value : "#5b5e65", type : "color"},
    {label : "Neutrals 6", value : "#151618", type : "color"}
];

В этом объекте я собираюсь пройтись по каждому элементу, чтобы затем сравнить каждый цвет друг с другом, чтобы убедиться, что эта пара проходит определенный уровень яркости.Вот мой код: 

function create_colors(){
    var neutral_set = $("<div/>").addClass("color-set");
    $(".color-container").html(neutral_set);
    neutral_set.append("<h3>Neutrals</h3>");

    $.each($neutrals, function(){
        var parent_color = this.value;

        var colorstrip = $("<div/>").addClass("color-strip").attr("style", "background-color:"+parent_color+";");

        neutral_set.append(colorstrip);

        $.each($neutrals, function(){
            var overlay = hexToRgb(this.value);
            var base = hexToRgb(parent_color)

            var diff_contrast = contrast(base, overlay);
            console.log(this.value+", "+parent_color);

            if(diff_contrast > 4.5)
            {
                colorstrip.append("<span style='color:"+this.value+"'>"+this.label+", "+diff_contrast+"</span>");
                return false;
            }
        })
    });
}

Вывод выглядит так: enter image description here

Это близко к тому, что я ожидал, где все светлеецвета показывают самый низкий, чтобы пройти контрастность 4,5: 1, в то время как темный серый и черный цвета пусты, не показывая, по моему опыту, белый #ffffff.Это то, что я останавливаю цикл с возвратом false, что мешает циклу продолжить?Я не совсем уверен, что я здесь не так сделал.

1 Ответ

1 голос
/ 03 мая 2019

Комментарий Jspcal верен. Последние две итерации никогда не соответствуют условию, поэтому интервал никогда не добавляется.

Я думаю, вы не компенсируете инвертированные параметры в вашей функции contrast. Например: 

contrast([255,255,255], [101,94,91]) //Gives 6.493852249020362
contrast([101,94,91], [255,255,255]) //Gives 0.1539918004988266

Попробуйте изменить функцию contrast, чтобы учесть это условие: 

function contrast(rgb1, rgb2) { 
    var result = (luminanace(rgb1.r, rgb1.g, rgb1.b) + 0.05) /
                 (luminanace(rgb2.r, rgb2.g, rgb2.b) + 0.05);

    if (result < 1) result = 1/result;
    return result;
}

Вот jsFiddle этого решения.

...