2

¿Cómo puedo dibujar estas figuras específicas en los paneles?

Tengo dos Paneles a los cuales quiero dibujar estas dos figura:

introducir la descripción de la imagen aquí

Una figura en cada uno, podría ponerle la imagen como tal de fondo en la propiedad BackgroundImage del panel, pero en ciertos momentos debo cambiar el color de la figura, por lo tanto si lo uso como imagen de fondo tendría que crear una imagen de cada color que desee usar o crear un método para cambiar el color a una imagen que suena complicado.

Por ejemplo de esta forma:

    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;
    }

Su uso sería el siguiente:

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

O convirtiendo la figura a BitMap (Pero como usaría esto?):

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

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

1 respuesta 1

1

Lo que puedes hacer es dibujar directamente en el Panel, haciendo uso del evento Paint. Este evento te devuelve un objeto de tipo Graphics en el que puedes dibujar directamente.

Yo probablemente haría algo asi. Primero, debes suscribirte al evento Paint de tu Panel, o bien desde la ventana de propiedades de la ventana de diseño, o bien añadiendo esto en tu constructor:

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

Posteriormente creamos un método que se encargará de dibujar tus figuras. En mi ejemplo recibe 2 parámetros, uno con el panel en el que debe dibujar y otro con que tipo de dibujo (en este ejemplo,este último parámetro cambia el color del dibujo, podría recibir un parámetro de tipo Color por ejemplo, depende de tus necesidades):

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;
        }
    }
}

Finalmente, creas un manejador de evento que se encarga de llamar al método anterior:

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

    CrearDibujos(p,0);
}

Como verás, en el ejemplo si le pasas 0 en el segundo parámetro,la figura será azul, y si le pasas un 1, verde.

Hay cosas que mejorar,pero creo que esto te puede servir para lo que requieres.

Edit

Hacer un rectángulo redondeado es mas complejo, ya que la librería gráfica de windows no tiene ningún método para ello. La única manera es usando una Figure usando un Path. El método sería este:

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;
}

Para mostrarlo, simplemente usando 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) });
6
  • Entiendo, puedo modificarlo. ¿Cómo hago para hacer transparente la parte sobrante del rectángulo? Cuando se crea el rectángulo con la fecha hacia arriba esa parte del rectángulo arriba queda de color blanco. Algo como : Bitmap.SetTransparencyKey(Color.White); o asi : Bitmap.MakeTransparent(Color.White); Commented el 18 ene. 2018 a las 16:08
  • Directamente no lo dibujes. Yo copie tu código, pero si quitas esta línea gr1.FillRectangle(whiteBrush, 0, 0, p.Width, p.Height); ya no te saldrá. El rectangulo blanco lo estabas dibujando tu.
    – Pikoh
    Commented el 18 ene. 2018 a las 16:09
  • Gracias, solo me quedaría como poder redondear los bordes para dibujar la otra imagen. Commented el 18 ene. 2018 a las 16:16
  • ¿Como redondeo los Bordes? Commented el 18 ene. 2018 a las 16:38
  • @J.Rodríguez eso es bastante mas complejo y se salía un poco de tu pregunta, pero mira la edición que hice de mi respuesta :)
    – Pikoh
    Commented el 18 ene. 2018 a las 16:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.