Draw figure in Panel with Bitmap, C #

Question

Draw figure in Panel with Bitmap, C #

Navigation

#1 by (1 votes)

2

How can I draw these specific figures on the panels?

I have two panels to which I want to draw these two figures:

A figure in each one, could put the image as such in the background property BackgroundImage of the panel, but at certain times I should change the color of the figure, therefore if I use it as a background image I would have to Create an image of each color you want to use or create a method to change the color to an image that sounds complicated.

For example in this way:

    private readonly List<Image> imageList;
    private int currentImageIndex = 1;

    private List<Image> CreateImages()
    {
        var lista = new List<Image>();
        int width = 250;
        int height = 50;
        using (SolidBrush brush = new SolidBrush(Color.SteelBlue))
        using (SolidBrush whiteBrush = new SolidBrush(Color.White))
        {
            for (int i = 0; i <= width; i += 10)
            {
                var bmp = new Bitmap(width, height);
                using (Graphics gfx = Graphics.FromImage(bmp))
                {
                    gfx.FillRectangle(whiteBrush, 0, 0, width, height);
                    gfx.FillRectangle(brush, width / 2 - i / 2, 0, i, height);
                }
                lista.Add(bmp);
            }
        }
        return lista;
    }

Its use would be the following:

   panel1.BackgroundImage = imageList[currentImageIndex]; //Indice 0
   panel2.BackgroundImage = imageList[currentImageIndex]; //Indice 1

Or converting the figure to BitMap (But how would you use this?):

var bmp1 = new Bitmap(Properties.Resources.Figura1);
var bmp2 = new Bitmap(Properties.Resources.Figura2);

Environment: Visual Studio 2010 - C # & .NET Framework 4

c# windows-forms bitmap

asked by J. Rodríguez 18.01.2018 в 15:59

source

1 answer

Help with reference pass in C ++? How to do an AUTOUPDATE to update without PlayStore in Android Studio?

score 1 · Accepted Answer

What you can do is draw directly in Panel , making use of the Paint event. This event returns an object of type Graphics in which you can draw directly.

I would probably do something like that. First, you must subscribe to the event Paint of your Panel , either from the properties window of the design window, or by adding this in your constructor:

this.panel1.Paint += new System.Windows.Forms.PaintEventHandler(this.panel1_Paint);

Later we created a method that will be responsible for drawing your figures. In my example, it receives 2 parameters, one with the panel in which it must draw and another with which type of drawing (in this example, this last parameter changes the color of the drawing, it could receive a parameter of type Color , for example, depends of your needs):

private void CrearDibujos(Panel p,int dibujo)
{
    using (SolidBrush brush = new SolidBrush(Color.SteelBlue))
    using (SolidBrush brush2 = new SolidBrush(Color.Green))
    using (SolidBrush whiteBrush = new SolidBrush(Color.White))
    {
        Graphics gr1 = p.CreateGraphics();
        switch (dibujo)
        {
            case 0:
                gr1.FillRectangle(whiteBrush, 0, 0, p.Width, p.Height);
                gr1.FillRectangle(brush, 0, 10, p.Width, Height);
                gr1.FillPolygon(brush, new Point[] { new Point(200, 10), new Point(210, 0), new Point(220, 10) });
                break;
            case 1:
                gr1.FillRectangle(whiteBrush, 0, 0, p.Width, p.Height);
                gr1.FillRectangle(brush2, 0, 10, p.Width, Height);
                gr1.FillPolygon(brush2, new Point[] { new Point(200, 10), new Point(210, 0), new Point(220, 10) });
                break;
        }
    }
}

Finally, you create an event handler that is responsible for calling the previous method:

private void panel1_Paint(object sender, PaintEventArgs e)
{
    var p = sender as Panel;
    var g = e.Graphics;

    CrearDibujos(p,0);
}

As you will see, in the example if you pass 0 in the second parameter, the figure will be blue, and if you pass a 1 , green.

There are things to improve, but I think this can be useful for what you need.

Edit

Making a rounded rectangle is more complex, since the windows graphic library does not have any method for it. The only way is to use a Figure using a Path . The method would be this:

public static GraphicsPath CrearRectanguloRedondeado(int x, int y, int width, int height,
                                int radius)
{
    //para que no se salga de los limites
    width -= radius;
    height -= radius;
    //////////////////////
    int xw = x + width;
    int yh = y + height;
    int xwr = xw - radius;
    int yhr = yh - radius;
    int xr = x + radius;
    int yr = y + radius;
    int r2 = radius * 2;
    int xwr2 = xw - r2;
    int yhr2 = yh - r2;

    GraphicsPath p = new GraphicsPath();
    p.StartFigure();

    p.AddArc(x, y, r2, r2, 180, 90);
    p.AddLine(xr, y, xwr, y);
    p.AddArc(xwr2, y, r2, r2, 270, 90);
    p.AddLine(xw, yr, xw, yhr);
    p.AddArc(xwr2, yhr2, r2, r2, 0, 90);
    p.AddLine(xwr, yh, xr, yh);
    p.AddArc(x, yhr2, r2, r2, 90, 90);
    p.AddLine(x, yhr, x, yr);

    p.CloseFigure();
    return p;
}

To show it, simply using FillPath :

gr1.FillPath(brush2, CrearRectanguloRedondeado(0, 10, p.Width, p.Height, 20));
gr1.FillPolygon(brush2, new Point[] { new Point(200, 10), new Point(210, 0), new Point(220, 10) });