Question

问题： 我有一个四停止梯度，颜色值分别为0％，33％，66％和100％。我想用百分比找出此渐变中任何一点的颜色值。

我认为我需要某种多停色调插值，但我想知道是否有一种简单的JavaScript方法可以在我首先潜入并开始尝试自己编写之前。

我正在使用颜色停止：

 //0%
  var stop1 = { r: 25, g: 47, b: 97 };

  //33%
  var stop2 = { r: 75, g: 183, b: 183 };

  //66%
  var stop3 = { r: 237, g: 120, b: 87 };

  //100%
  var stop4 = { r: 209, g: 74, b: 88 };

Answer 1

您可以使用步长间隔的增量并使用正确的比率计算颜色。

工作原理。

例如，我们正在寻找70％的颜色，首先，我们得到
的间隔
[66, 100]
然后按
建立比率
百分比增量和左边距（left）
70 - 66 => 4
正确间隔的增量和百分比（right）
100 - 70 => 30
左右间隔的增量（delta）
100 - 66 => 34
使用上面生成的比率，可以计算出两种颜色之间的正确颜色。
(color of left interval * right + color of right interval * left) / delta => color
对所有颜色重复最后一步并返回结果。

工作示例：

* 表示给定的颜色，悬停显示百分比值和RGB值。

function getColor(percent) {
    function getInterval(range) {
        function getRatio(color) {
            return Math.floor((colors[range[0]][color] * right + colors[range[1]][color] * left) / delta);
        }

        var left = percent - range[0],
            right = range[1] - percent,
            delta = range[1] - range[0];

        return { r: getRatio('r'), g: getRatio('g'), b: getRatio('b') };
    }

    return colors[percent] || getInterval(stops.reduce(function (r, a, i, aa) {
        return a < percent ? [a, aa[i + 1]] : r;
    }, [0, 0]));
}

var stops = [0, 33, 66, 100],
    colors = { 0: { r: 25, g: 47, b: 97 }, 33: { r: 75, g: 183, b: 183 },  66: { r: 237, g: 120, b: 87 }, 100: { r: 209, g: 74, b: 88 } },
    i, color, rgb;

for (i = 0; i <= 100; i++) {
    color = getColor(i),
    rgb =  ['r', 'g', 'b'].map(function (k) { return color[k]; });
    document.body.innerHTML += '<span style="color: #fff; background-color: rgb(' + rgb + ');" title="' + (colors[i] ? '* ' : '') + i + ' % rgb(' + rgb.join(', ') + ')">' + (colors[i] ? '*&nbsp;' : '&nbsp;&nbsp;') + '</span>';
}

Answer 2

我还发现这个漂亮的小图书馆用于玩颜色：chroma.js

以四停止渐变的特定百分比查找RGB颜色值

2 个答案: