javascript - 如何使用javascript按百分比从渐变中获取颜色值？

Question

我有一个固定宽度的 div，使用 css 应用渐变。我想基于此渐变构建基于 slider 的颜色选择器。

当我拖动 slider 时，我会计算百分比位置，并且我想根据该值获取十六进制或 rgb 颜色代码。

我的想法是创建一个定义了开始/停止位置和颜色的数组，然后根据 slider 位置从该数组中找到两个值，然后以某种方式找到两者之间的颜色:这是我无法前进的地方。

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

    }
});

Answer 1

我能够使用这个基于 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;
}

我只需要传递渐变数组中最接近的两个颜色代码和 slider handle 所在的比率(可以借助 slider 宽度轻松计算)。这是现场示例:

http://jsfiddle.net/vksn3yLL/