WPF Color Interpolation

Question

I am trying to draw a WPF control background based on a palette where each color is assigned values ​​(e.g. Red = 0, DarkGreen = 10, Green = 20, LightGreen = 30) and a user-selected value (e.g. 25) that will give the resulting color. I would like the resulting color to be an interpolation between the two closest color values ​​(for example, for a value of 25 it should give a color between green and light green)

For this, I am thinking about using the existing LinearGradientBrush in WPF; set GradientStops, offsets and get the color with the given value. Is there a way to do this or should I implement my own color interpolation function?

Thank.

Answer 1

LinearGradientBrush , . . .

, , 10 .

public static Color GetColor(int value)
{
    int startIndex = (value/10)*10;
    int endIndex = startIndex + 10;

    Color startColor = Palette[startIndex];
    Color endColor = Palette[endIndex];

    float weight = (value - startIndex)/(float)(endIndex - startIndex);

    return Color.FromArgb(
        (int)Math.Round(startColor.R * (1 - weight) + endColor.R * weight),
        (int)Math.Round(startColor.G * (1 - weight) + endColor.G * weight),
        (int)Math.Round(startColor.B * (1 - weight) + endColor.B * weight));

}

10, .

Answer 2

10/20/30 DarkGreen/Green/Lightgreen.

- ... .

Color             Pal-Code     RGB            HSL
Red               0            255,0,0        0,240,120
Dark Green        10           0,128,0        80,240,60
Green             20           0,255,0        80,240,120
Light Green       30           128,255,128    80,240,180

" ", . 25 ( HSL ), ...

Green             20           0,255,0        80,240,120
Light Green       30           128,255,128    80,240,180

25 ,

Palette Code     Hue        Sat      Luminence
20               80         240      120
30               80         240      180
-------------------------------------------------
25               80         240      150 

6, .6 .

Red               0            255,0,0        0,240,120
Dark Green        10           0,128,0        80,240,60

Palette Code     Hue        Sat      Luminence
0                0          240      120
10               80         240      60
-------------------------------------------------
6                48         240      84

0->80      = +80 * 60%   = +48    So 0+48   = 48
240->240   =   0 * 60%   = 0      So 240+0  = 240
120->60    = -60 * 60%   = -36    So 120-36 = 84

Answer 3

, , , , , , , .

Answer 4

. , "" GradientBrush . , . , - , .

Answer 5

, , .NET 4.0 LinearGradientBrush.

private Color GetColor(double ratio)
{
    if (ratio < 0) ratio = 0;
    else if (ratio > 1) ratio = 1;

    //Find gradient stops that surround the input value
    GradientStop gs0 = ColorScale.GradientStops.Where(n => n.Offset <= ratio).OrderBy(n => n.Offset).Last();
    GradientStop gs1 = ColorScale.GradientStops.Where(n => n.Offset >= ratio).OrderBy(n => n.Offset).First();

    float y = 0f;
    if (gs0.Offset != gs1.Offset)
    {
        y = (float)((ratio - gs0.Offset) / (gs1.Offset - gs0.Offset));
    }

    //Interpolate color channels
    Color cx = new Color();
    if (ColorScale.ColorInterpolationMode == ColorInterpolationMode.ScRgbLinearInterpolation)
    {
        float aVal = (gs1.Color.ScA - gs0.Color.ScA) * y + gs0.Color.ScA;
        float rVal = (gs1.Color.ScR - gs0.Color.ScR) * y + gs0.Color.ScR;
        float gVal = (gs1.Color.ScG - gs0.Color.ScG) * y + gs0.Color.ScG;
        float bVal = (gs1.Color.ScB - gs0.Color.ScB) * y + gs0.Color.ScB;
        cx = Color.FromScRgb(aVal, rVal, gVal, bVal);
    }
    else
    {
        byte aVal = (byte)((gs1.Color.A - gs0.Color.A) * y + gs0.Color.A);
        byte rVal = (byte)((gs1.Color.R - gs0.Color.R) * y + gs0.Color.R);
        byte gVal = (byte)((gs1.Color.G - gs0.Color.G) * y + gs0.Color.G);
        byte bVal = (byte)((gs1.Color.B - gs0.Color.B) * y + gs0.Color.B);
        cx = Color.FromArgb(aVal, rVal, gVal, bVal);
    }
    return cx;
}

, ():

var brush = new LinearGradientBrush();
brush.StartPoint = new Point(0, 0);
brush.EndPoint = new Point(1, 0);

//Set brush colors
brush.GradientStops.Add(new GradientStop() { Color = Color.FromRgb(102, 40, 0), Offset = 0 });
brush.GradientStops.Add(new GradientStop() { Color = Color.FromRgb(254, 167, 80), Offset = 0.25 });
brush.GradientStops.Add(new GradientStop() { Color = Color.FromRgb(0, 153, 51), Offset = 0.5 });
brush.GradientStops.Add(new GradientStop() { Color = Color.FromRgb(232, 165, 255), Offset = 0.75 });
brush.GradientStops.Add(new GradientStop() { Color = Color.FromRgb(66, 0, 89), Offset = 1 });

: http://dotupdate.wordpress.com/2008/01/28/find-the-color-of-a-point-in-a-lineargradientbrush/