2015-05-09 8 views
8

Ich habe eine feste Breite Div mit Gradient mit CSS angewendet. Ich möchte Slider-basierte Farbauswahl basierend auf diesem Farbverlauf erstellen.Wie bekommt man den Farbwert vom Gradient prozentual mit Javascript?

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

Meine Idee war, ein Array mit den Start/Stop-Positionen und Farben zu erstellen, dann finden Sie zwei Werte aus diesem Array auf der Schieberposition, dann irgendwie die Farbe zwischen: das ist, wo ich nicht vorwärts bewegen kann .

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

    } 
}); 

Antwort

20

konnte ich 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 das einfach nur brauchen, um passieren zwei nächstgelegene Farbcodes aus dem Gradientenfeld und das Verhältnis, in dem sich der Schieberegler befindet (was einfach mit Hilfe der Schiebereglerbreite berechnet werden kann). Hier ist das anschauliche Beispiel:

http://jsfiddle.net/vksn3yLL/

+1

was der Punkt w/1 – oyatek

+0

Dies verdient mehr up Stimmen! Danke für dieses handliche Stück Code !! –

+0

@passatgt können Sie bitte das gleiche mit Javascript Mousemove Funktionalität tun ..? (Ohne Jquery) weil ich in reinem javascript arbeite, kann ich jquery slider nicht hinzufügen. – ArunValaven