wake-up-neo.com

Wie kann ich mit Javascript den Farbwert aus dem Farbverlauf in Prozent ermitteln?

Ich habe eine feste Breite div mit Farbverlauf mit CSS angewendet. Ich möchte einen auf Schiebereglern basierenden Farbwähler erstellen, der auf diesem Farbverlauf basiert.

Wenn ich den Schieberegler ziehe, berechne ich die prozentuale Position und möchte den Hex- oder RGB-Farbcode basierend auf diesem Wert erhalten.

Meine Idee war es, ein Array mit den definierten Start-/Stopp-Positionen und Farben zu erstellen, dann zwei Werte aus diesem Array basierend auf der Position des Schiebereglers zu finden und dann irgendwie die Farbe dazwischen zu finden: Hier kann ich mich nicht vorwärts bewegen.

Demo: 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');

    }
});
12
passatgt

Ich konnte dieses Problem mit dieser Funktion lösen, die auf der less.js-Funktion basiert: 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;
}

Ich muss nur die beiden nächstgelegenen Farbcodes aus dem Farbverlaufsarray und das Verhältnis, in dem sich der Schieberegler befindet, übergeben (was mit Hilfe der Schiebereglerbreite einfach berechnet werden kann). Hier ist das Live-Beispiel:

http://jsfiddle.net/vksn3yLL/

33
passatgt

vielleicht ist es ein Thema, aber ich finde, es könnte denjenigen helfen, die hierher kommen, weil sie eine Beziehung zwischen einer Farbe und einem Prozentsatz in jquery .css() wollen.

In diesem Beispiel wird eine Prozentzahl angezeigt rot bis grün je nachdem, ob sie am nächsten bei Null oder 100 liegt :

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

Bitte sehen Sie die Demo unten:

$('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>