填写面板在三种颜色渐变 [英] Fill Panel with gradient in three colors

问题描述

我工作的项目，我需要做的那种使用C＃颜色选择器。

I'm working on project and I have to do kind of color picker using C#.

所以我决定，这将是在此背景下在Win一个面板窗体应用程序。

So I've decided that it will be a Panel with this background in Win Forms App.

背景应该有三种颜色的RGB梯度：红色（0 - 255），蓝（0 - 255）和绿色= 0

Background should have gradient with three colors in rgb: red (0 - 255), blue (0 - 255) and green = 0.

但我不能找到什么，我应该使用的任何信息这一点。

But I can't find any information about what I should use for this.

我试着写一些代码，这里是我做了什么。

I tried to write some code and here is what I've done.

{
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }



    private void Form1_Load(object sender, EventArgs e)
    {
        panel1.Paint += new PaintEventHandler(panel1_Paint);
        panel1.Refresh();
    }

    private void panel1_Paint(object sender, PaintEventArgs e)
    {
        Point startPoint = new Point(0, 0);
        Point endPoint = new Point(150, 150);

        LinearGradientBrush lgb =
            new LinearGradientBrush(startPoint, endPoint,     Color.FromArgb(255, 255, 0, 0), Color.FromArgb(255, 255, 255, 0));
        Graphics g = e.Graphics;
        g.FillRectangle(lgb, 0, 0, 150, 150);
       // g.DrawLine(new Pen(Color.Yellow, 1.5f), startPoint, endPoint);
    }
}

}

}

和现在我有面板，这种梯度

And now I have panel with this gradient

我应该用在第一张图片让梯度？

What I should use to get gradient at first picture?

和第二问题：我应该怎样做一下这样的背景后得到的像素颜色

And second question: What should I do to get the pixel color after clicking on this background?

推荐答案

下面是使用多色的例子一个LinearGradientBrush 在油漆事件：

Here is an example for using a multicolor LinearGradientBrush in the Paint event:

LinearGradientBrush linearGradientBrush =
   new LinearGradientBrush(panel4.ClientRectangle, Color.Red, Color.Yellow, 45);

ColorBlend cblend = new ColorBlend(3);
cblend.Colors = new Color[3]  { Color.Red, Color.Yellow, Color.Green };
cblend.Positions = new float[3] { 0f, 0.5f, 1f };

linearGradientBrush.InterpolationColors = cblend;

e.Graphics.FillRectangle(linearGradientBrush, panel4.ClientRectangle);

可以自由变化的颜色的数目，角度或停止点的扩散。只要确保你总是有相同数量的颜色和停止点，让他们在0和结束从1开始。

You can freely vary the number of colors, the angle or the spread of the stop points. Just make sure you always have the same number of colors and stop points and let them start at 0 and end at 1.

在构造函数中的颜色会被忽略，顺便说一句。

The colors in the constructor are ignored, btw..

要获得点击的颜色，您可以编写代码鼠标点击：

To get a clicked color you can code the MouseClick:

Color clickedColor = Color.Empty;

private void panel4_MouseClick(object sender, MouseEventArgs e)
{
    using (Bitmap bmp = new Bitmap( panel4.ClientSize.Width, panel4.ClientSize.Height))
    {
        panel4.DrawToBitmap(bmp,panel4.ClientRectangle);
        clickedColor = bmp.GetPixel(e.X, e.Y);
    }
}

如果你想赶上多少点击可能会更好保持位图在类级别的变量，而不是重新创建它所有的时间..其设置为面板的的BackgroundImage，如卡拉的回答假设也可能是一个不错的选择..

If you want to catch many clicks it may be better to keep the Bitmap in a class level variable instead of recreating it all the time.. Setting it as the Panel's BackgroundImage, as Kala's answer assumes may also be a good option..

这应该回答在标题的问题。但是你的第一个图像不显示三种颜色的渐变。它显示了一个2D梯度四种颜色。对于这样一个更昂贵的着色方法，你应该把颜色在位图键，将其设置为面板的的BackgroundImage ..

This should answer the question in the title. However your first image doesn't show a gradient with three colors. It shows a 2D gradient with four colors. For such a more expensive coloring method you should put the colors in a Bitmap and set it as the Panel's BackgroundImage..

更新下面是一段代码，创建了一个2D梯度：

Update Here is a piece of code that creates a 2D Gradient:

Bitmap Gradient2D(Rectangle r, Color c1, Color c2, Color c3, Color c4)
{
    Bitmap bmp = new Bitmap(r.Width, r.Height);

    float delta12R = 1f * (c2.R - c1.R) / r.Height;
    float delta12G = 1f * (c2.G - c1.G) / r.Height;
    float delta12B = 1f * (c2.B - c1.B) / r.Height;
    float delta34R = 1f * (c4.R - c3.R) / r.Height;
    float delta34G = 1f * (c4.G - c3.G) / r.Height;
    float delta34B = 1f * (c4.B - c3.B) / r.Height;
    using (Graphics G = Graphics.FromImage(bmp) )
    for (int y = 0; y < r.Height; y++)
    {
        Color c12 = Color.FromArgb(255,  c1.R + (int)(y * delta12R), 
              c1.G + (int)(y * delta12G), c1.B + (int)(y * delta12B));
        Color c34 = Color.FromArgb(255, c3.R + (int)(y * delta34R), 
              c3.G + (int)(y * delta34G), c3.B + (int)(y * delta34B));
        using ( LinearGradientBrush lgBrush = new LinearGradientBrush(
              new Rectangle(0,y,r.Width,1), c12, c34, 0f) )
        {  G.FillRectangle(lgBrush, 0, y, r.Width, 1);  }
    }
    return bmp;
}

下面是你如何使用它：

    public Form1()
    {
        InitializeComponent();
        panel4.BackgroundImage = Gradient2D(panel4.ClientRectangle, 
               Color.Black, Color.FromArgb(255, 0, 255, 0), Color.Red, Color.Yellow);
    }

这使用简单的 LinearGradientBrushes 不需要额外的颜色列表下降超过面板的高度。

This uses simple LinearGradientBrushes without an extra colors list going down over the height of the Panel.

注意 Col​​or.Green 是一个相当黑暗的色调，所以我用 FromRgb ，为更美好的绿色。如果你的面板比256像素更大的可能要填写更大的条纹，进而优化; IFS它是垂直的，你可能要改变回路走的X-代替Ÿ过..

Note that Color.Green is a rather dark hue, so I used FromRgb for a brighter green. If your Panel is greater than 256 pixels you may want to optimze by filling larger stripes; ifs it is vertical you may want to change the loop to go over x instead of y..

下面是结果：

要通过点击选择你现在只是宣读了的BackgroundImage 颜色：

To pick with a click you now simply read out the color from the BackgroundImage:

private void panel4_MouseClick(object sender, MouseEventArgs e)
{
    clickedColor = ((Bitmap)panel4.BackgroundImage).GetPixel(e.X, e.Y);
}

这篇关于填写面板在三种颜色渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！