그라디언트 생성을위한 스 니펫 (snippet)과 관련된 이상한 문제

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에서 볼 수 있듯이 (Opera와 Firefox에서 적어도) 모든 것이 거의 끝납니다 (16 진수 값을 표시하려면 마우스를 올려 놓으면됩니다). 예를 들어 gradient(50, ['ffffff', 'ffff00', '00ff00'])을 호출하면 16 진수 색상 값이 빨간색에서 노란색으로 점차 이동 한 다음 석회로 점진적으로 변하는 길이 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-1 단계하지 리터 용의 배열을 준비했기 때문에 마지막 계산 라인 리터의.

BTW 코드가 이해하기 쉽지 않으며 이해하기 쉽고 코드를 작성하기 쉽습니다. [0, 1, 2] .map (sth) 대신 루프를 작성하십시오.