Home / Questions / 131997
Accepted
J. Rodríguez
Asked: 2020-01-19 06:59:58 +0800 CST 2020-01-19 06:59:58 +0800 CST

Draw figure in Panel with Bitmap, C#

  • 772

How can I draw these specific shapes on the panels?

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

enter image description here

A figure in each one, I could put the image as such in the background in the BackgroundImagepanel property, but at certain times I must 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 I 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#

1 Answers

  1. Best Answer

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

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

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

    Later we create a method that will be in charge of drawing your figures. In my example it receives 2 parameters, one with the panel in which it should draw and another with what type of drawing (in this example, this last parameter changes the color of the drawing, it could receive a type parameter Colorfor example, it depends on 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 takes care of 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 it 0in the second parameter, the figure will be blue, and if you pass it a 1, green.

    There are things to improve, but I think this can serve you for what you require.

    Edit

    Making a rounded rectangle is more complex, since the windows graphics library does not have any method for it. The only way is using one Figureusing 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 display 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) });
    • 1