2014-10-21 4 views
0

나는 하루 종일 그것에 대해 생각한 후에 문제가 있으며 해결책이 필요합니다. 범위를 사용하여 색상을 변경하는 캔버스를 생성하고 싶습니다. 간단한 소리.범위의 paper.js를 사용한 색상 변환

색상은 (HSB)입니다. 6 가지 색상이 있습니다.

  1. 블루 (230, S, B)
  2. 그린 (130, S, B) 황색
  3. (55, S, B)
  4. 오렌지 (40, S, B)
  5. 적색 (0 (360), S, B)
  6. violette에 (315, S, B)

채도 및 밝기 (항상 동일 할 수있다) 하찮다. 5.9 황색

  • 옐로우 6 - - 8.9 오렌지
  • 오렌지 9 -
  • 녹색 3 2.9 녹색 -

    1. 청색 0이 범위에서 변경하는 11.9 붉은
    2. 빨간색 12 - 14.9 violette

    그래서이 데이터를 얻은 경우

    var sample Data = new Array(0.1,0.2,0.3,0.4,3.4,5.9,9.3,9.4,9.5,9.6,...); 
    

    캔버스가 파란색에서 녹색으로 천천히 사이의 색상을 변경해야하고 있기 때문에 3.4 (녹색과 노란색 사이에 뭔가) 0.4에서 "큰 도약"의 "컬러 컷"이 있어야합니다.

    이 문제의 "논리"를 찾고 있습니다. 이미 캔버스가있는 HTML이 있습니다. 캔버스와 색상의 경우 Paper.js를 사용하고 있습니다.

    누군가 내 문제를 이해하고 있기를 바랍니다.

    감사

  • 답변

    1

    나는 내가 캔버스에 색을 점점 도움이되지 수 Paper.js 모르지만, 나는 색상으로 데이터를 변환하는 데 도움이 될 수 있습니다. 5 개의 색조 범위가 같은 크기가 아니기 때문에 각각에 대해 별도의 계산을 수행해야합니다.

    var sampleColors = [], 
        l = sampleData.length, 
        s = '50%', 
        b = '50%'; 
    function getColor(d) { 
        var c, m = d % 3; 
        if (d < 3) c = 230 - m * 33.333; 
        else if (d < 6) c = 130 - m * 25; 
        else if (d < 9) c = 55 - m * 5; 
        else if (d < 12) c = 40 - m * 13.333; 
        else c = 360 - m * 15; 
        return 'hsb(' + Math.round(c) + 'deg,' + s + ',' + b + ')'; 
    } 
    
    for(var i = 0; i < l; i++) { 
        sampleColors.push(getColor(sampleData[i])); 
    } 
    

    지금 sampleColorssampleData의 항목에 속하는 HSB 색상 문자열이 포함되어 있습니다.

    sampleData[0] == 0.1; sampleColor[0] == 'hsb(227deg,50%,50%)'; 
    sampleData[4] == 3.4; sampleColor[4] == 'hsb(120deg,50%,50%)'; 
    

    색상 표기법이 사용자 요구에 맞지 않는 경우 비평을 게시하십시오.

    +0

    내 2 질문에 대한 답변을 알고 계셨습니까? – Linda