用片段生成漸變的奇怪問題

我用我自己的庫做了很多東西，最近我決定添加漸變功能，但是我遇到了一個問題，我似乎記得有一段時間了以前也是這樣，這是我的漸變在結束時稍微偏離的問題。首先，代碼有問題：用片段生成漸變的奇怪問題

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看到，所有的東西都很有效（至少在Opera和Firefox中），除了最後的漸變稍微偏離（懸停以顯示十六進制值）外。例如，調用gradient(50, ['ffffff', 'ffff00', '00ff00'])確實會創建一個長度爲五十的數組，其中包含十六進制顏色值，從紅色逐漸變爲黃色，然後變爲石灰，但最後一種顏色不是完全石灰（在這種情況下，它會出現05ff00）。這意味着數學中有一些輕微的東西，而不是方法論。

那麼......任何人都願意在叢林中跋涉，那是我覺得奇妙而美麗的代碼，以幫助我達成解決方案？所有的援助非常感謝。

來源

2009-04-11 Hexagon Theory

演示頁面鏈接在FF 3.0.8中不起作用 – 2009-04-11 16:57:46

澄清，當我點擊「生成」時演示沒有出現任何問題 – 2009-04-11 17:00:55

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-1的步驟不升的S陣列。

順便說一句，你的代碼真的很難理解，試着編寫更易於理解和標準的代碼。並且寫入循環而不是[0，1，2] .map（sth）。

來源

2009-04-13 18:07:44 BYK

用片段生成漸變的奇怪問題

回答

相關問題