生成渐变的代码段出现奇怪的off-by-one问题

Question

我使用我自己的库来做很多东西，最近我决定添加渐变功能，但我遇到了一个问题，我似乎记得不久前也有过这个问题，这是我的渐变在接近尾声时稍微偏离的问题。首先，有问题的代码：

gradient = function(l, g)
 {
var r = [], s = [], f = g.length - 1;
for (var x = 0; x < g.length; x++)
    g[x] = (typeof(g[x]) == 'string' ? g[x] : g[x].join(','))._replace(['#', ' ', 'rgb(', ')'], ''),
    g[x] = (g[x].indexOf(',') != -1
        ? g[x].split(',')
        : g[x].chunk(2).map(function(_)
         {
            return _.fromBase('hex');
         }));
for (var x = 0; x < f; x++)
    s[x] = [(g[x][0] - g[x + 1][0]) / (l - 1) * f, (g[x][1] - g[x + 1][2]) / (l - 1) * f, (g[x][2] - g[x + 1][2]) / (l - 1) * f];
for (var x = 0; x < l; x++)
    r[x] = '', ([0, 1, 2]).map(function(_)
     {
        var c = Math.floor(x / (l / (g.length - 1)));
        r[x] += (g[c][_] - s[c][_] * (x - (l / (g.length - 1)) * c)).toBase('hex').pad('0', 2);
     });
return r;
 };

当然，还有我的库：http://wimg.co.uk/HJ0X8B.js

祝您在这里玩得开心！：)如果您认为自己能够以任何方式提供帮助，我在渐变代码片段中使用的自定义函数是_replace()、chunk()、map()、toBase()和fromBase()……正如你可以在this demo page上看到的那样，一切都很正常(至少在歌剧和火狐中是这样)，除了在结尾的渐变变得如此轻微(悬停以显示十六进制值)。例如，调用gradient(50, ['ffffff', 'ffff00', '00ff00'])确实创建了一个长度为50的数组，其中包含从红色到黄色再到石灰逐渐变化的十六进制颜色值，但是最后一种颜色并不完全是石灰(在本例中，它的值为05ff00)；这意味着在数学上和方法上都略有偏差。

所以..。有没有人愿意涉足丛林，这是我觉得非常美妙的代码，可以帮助我找到解决方案？我们非常感谢您的帮助。

Answer 1

gradient = function(l, g)
 {
var r = [], s = [], f = g.length - 1;
for (var x = 0; x < g.length; x++)
    g[x] = (typeof(g[x]) == 'string' ? g[x] : g[x].join(','))._replace(['#', ' ', 'rgb(', ')'], ''),
    g[x] = (g[x].indexOf(',') != -1
        ? g[x].split(',')
        : g[x].chunk(2).map(function(_)
         {
            return _.fromBase('hex');
         }));
for (var x = 0; x < f; x++)
    s[x] = [(g[x][0] - g[x + 1][0]) / (l - 1) * f, (g[x][1] - g[x + 1][1]) / (l - 1) * f, (g[x][2] - g[x + 1][2]) / (l - 1) * f];
for (var x = 0; x < l; x++)
    r[x] = '', ([0, 1, 2]).map(function(_)
     {
        var c = Math.floor(x / (l / (g.length - 1)));
        r[x] += (g[c][_] - s[c][_] * (x - ((l-1) / (g.length - 1)) * c)).toBase('hex').pad('0', 2);
     });
return r;
 };

在最后一行计算中使用( l-1 )而不是l，因为您已经为l-1步准备了s数组，而不是l。

顺便说一句，你的代码真的很难理解，试着写出更容易理解和标准化的代码。写for循环，而不是0，1，2.map(sth)。