填充面板与三种颜色的渐变 [英] 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 Forms应用程序中将是一个具有此背景的Panel。

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

应该在rgb：red（0 - 255），blue（0 - 255）和green = 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?

推荐答案

Paint 事件中的 LinearGradientBrush ：

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.

构造函数中的颜色被忽略，btw。

The colors in the constructor are ignored, btw..

要获得点击的颜色，您可以使用 MouseClick ：

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，因为Kala的回答假设也可能是一个很好的选择。

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渐变。对于这样一个更昂贵的着色方法，你应该把颜色放在 Bitmap 中，并将其设置为 Panel code> 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.

请注意， Color.Green 是一个相当暗的色调，因此我使用 FromRgb 为一个更亮的绿色。如果你的 Panel 大于256像素，你可能想通过填充较大的条纹进行优化;如果它是垂直的，你可能想改变循环去过x而不是y ..

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屋！