Question

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

Answer 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。

Answer 2

你可以通过从另一个中减去每个元组中的每个值来找到它们之间的差异，将这些差异中的每一个除以＆＃34;步骤＆＃34;为每个步骤获取每个值的增量增量，然后在每个步骤中添加该增量。

例如，要从(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)。

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

在RGB值之间线性缩放

2 个答案: