在 RGB 值之间线性缩放答案

【问题标题】：Linearly Scale Between RGB values在 RGB 值之间线性缩放
【发布时间】：2019-08-07 02:38:42
【问题描述】：

两个不同的 RGB（三元组）值之间是否存在简单的数学关系。假设我想从红色扩展到绿色 (1,0,0) 到 (0,1,0)。或者说这些值更复杂我如何从(22,183,19) 线性缩放到(199, 201, 3)？

【问题讨论】：

【解决方案1】：

这是一个简单的算法，它将生成一个表示线性转换的 RGB 元组数组。我注意到你的个人资料中有javascript 标签，所以我同意了。我选择使用任何对之间的最大距离来确定步数，而不是使用固定的步数（但显然这很容易改变）。

function generateLinearTransition(start, end) {
    var rDiff = end.r - start.r;
    var gDiff = end.g - start.g;
    var bDiff = end.b - start.b;
    var steps = Math.max(Math.abs(rDiff), Math.abs(gDiff), Math.abs(bDiff));
    var rStepSize = rDiff / steps;
    var gStepSize = gDiff / steps;
    var bStepSize = bDiff / steps;
    var tuples = [start];
    var current = start;
    for (var i = 0; i < steps; i++) {
        current = {
            r: current.r + rStepSize,
            g: current.g + gStepSize,
            b: current.b + bStepSize,
        };
        tuples.push({
            r: Math.floor(current.r),
            g: Math.floor(current.g),
            b: Math.floor(current.b)
        });
    }
    tuples.push(end);
    return tuples;
}

var a = {
    r: 22,
    g: 183,
    b: 19
};

var b = {
    r: 199,
    g: 201,
    b: 3
};

var results = generateLinearTransition(a, b);

for (var i = 0; i < results.length; i++) {
    var current = results[i];
    console.log("(" + current.r + "," + current.g + "," + current.b + ")");
}

顺便说一句，您的(1,0,0) 和(0,1,0) 示例本质上都是黑色的，因此那里不会有太多过渡。如果您分别使用(255,0,0)（红色）和(0,255,0)（绿色），您将获得更长的过渡时间。

这是working example。

【讨论】：

【解决方案2】：

您可以通过从另一个减去一个来找到每个元组中每个值之间的差异，将这些差异中的每一个除以“步数”以获得每个值、每个步长以及每个步长的增量增量添加该增量。

例如，从(22, 183, 19) 扩展到(199, 201, 3)，例如，4 个步骤：

199 - 22 = 177; 177 / 4 = 44.25
201 - 183 = 18; 18 / 4 = 4.5
3 - 19 = -16; -16 / 4 = -4

因此，在每一步中，您都需要将44.25 添加到第一个值 (r)，将4.5 添加到第二个值 (g)，并将 -4 添加到第三个值 (b)。所以你会从(22, 183, 19) 到(66.25, 187.5, 15) 到(110.5, 192, 11) 到(154.75, 196.5, 7) 到(199, 201, 3)。

基本上，分别处理每个组件，从一个到另一个线性缩放，然后组合。

【讨论】：