web-dev-qa-db-fra.com

Comment obtenir une valeur de couleur de gradient en pourcentage avec javascript?

J'ai un div de largeur fixe avec dégradé appliqué en utilisant css. Je veux construire un sélecteur de couleur basé sur un curseur basé sur ce dégradé.

Lorsque je fais glisser le curseur, je calcule la position en pourcentage et je souhaite obtenir le code de couleur hex ou RVB basé sur cette valeur.

Mon idée était de créer un tableau avec les positions de début/fin et les couleurs définies, puis de trouver deux valeurs de ce tableau en fonction de la position du curseur, puis de trouver la couleur entre: c’est là que je ne peux pas avancer.

Démo: http://jsfiddle.net/pdu8rpfv/

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});
javascriptjquerycsscolorslinear-gradients
12
passatgt

J'ai pu résoudre ce problème en utilisant cette fonction, basée sur la fonction less.js: http://lesscss.org/functions/#color-operations-mix

function pickHex(color1, color2, weight) {
    var w1 = weight;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}

J'ai simplement besoin de transmettre les deux codes de couleur les plus proches du tableau de dégradés et le rapport où se trouve la poignée du curseur (qui peut être calculé facilement à l'aide de la largeur du curseur). Voici l'exemple en direct:

http://jsfiddle.net/vksn3yLL/

33
passatgt

peut être hors sujet mais je trouve que cela pourrait aider ceux qui viennent ici parce qu'ils veulent une relation entre une couleur et un pourcentage dans jQuery .css()

Cet exemple fait apparaître un pourcentage/ du rouge au vert selon que c'est le plus proche de zéro ou de 100 :

$('#Elm').css({color: 'rgb(' + ((100 - percent) *2.56) +',' + (percent *2.56) +',0)'})

S'il vous plaît voir la démo ci-dessous:

$('button').click( e => {
  const percent = Math.floor(Math.random()*100);
  const newElm = $(`<b>${percent}</b><br>`)
  .css({color: `rgb(${(100 - percent) *2.56},${percent *2.56},0)`})
  $('body').append(newElm);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click to make new percentage</button><br>
0
Sébastien Garcia-Roméo