在一个范围内用paper.js进行颜色变换 [英] Color transformation with paper.js in a range

问题描述

我有一个问题，需要一个解决方案后，一整天的思考。我想生成一个画布，通过使用一个范围来改变他的颜色。听起来很简单。

I have a problem and need a solution after thinking about it the whole day. I want to generate a canvas which changes his color by using a range. Sound simple.

颜色是（HSB）。有6种颜色。

The colors are in (HSB). There are 6 colors.

1. blue（230，S，B）


2. S，B）


3. 黄色（55，S，B）


4. 橙色（40，S，B）


5. red（0（or 360），S，B）


6. violette（315，S，B）

1. blue (230, S,B)
2. green (130, S,B)
3. yellow (55, S,B)
4. orange (40, S,B)
5. red (0(or 360), S,B)
6. violette (315, S,B)

颜色必须在此范围内变化

the color has to change in this range

1. blue 0 - 2.9 green


2. green 3 - 5.9 yellow


3. 黄色6 - 8.9橙色


4. 橙色9 - 11.9红色


5. 红色12 - 14.9紫罗兰

1. blue 0 - 2.9 green
2. green 3 - 5.9 yellow
3. yellow 6 - 8.9 orange
4. orange 9 - 11.9 red
5. red 12 - 14.9 violette

所以如果我得到一些像这样的数据

so if i've get some data like this

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,...);

画布必须改变从蓝色到绿色之间的色调，然后应该有一个因为大跳跃从0.4到3.4（绿色和黄色之间的东西）。

the canvas has to change the hue between slow from blue to green and then there should be a "color-cut" because of the "big jump" from 0.4 to 3.4 (something between green and yellow).

我在寻找这个问题背后的逻辑。我已经有画布的HTML。对于画布和颜色，我使用Paper.js

I'm looking for the "logic" behind this problem. I have already the HTML with canvas. For canvas and colors I'm using Paper.js

希望有人了解我的问题！

hope someone understand my problem!

p>

推荐答案

我不知道Paper.js，所以我不能帮助在画布上获得颜色，但我可以帮助将数据转换为颜色。因为你的五个色调范围没有相同的大小，我们必须对每个色调进行单独的计算。

I don't know Paper.js, so I can't help getting the colors on the canvas, but I can help to convert the data into a color. Since your five hue ranges havn't same size we have to do a separate calculation for each.

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]));
}

现在 sampleColors 属于 sampleData 中的项目的hsb颜色字符串。

Now sampleColors contains the hsb color strings that belong to the items in sampleData.

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

如果颜色符号不符合您的需要，请张贴评论。

If the color notation doesn't fit your needs, please post critique.

这篇关于在一个范围内用paper.js进行颜色变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！