PictureBox redondeado

Clase GraphicsPath

La clase GraphicsPath, del espacio de nombres System.Drawing.Drawing2D, tiene objetos que representan figuras (líneas y curvas conectadas). Las aplicaciones usan estas secuencias de datos con líneas y curvas (path) para dibujar los bordes de las figuras, rellenar el interior de las figuras y crear zonas de recorte. El motor gráfico mantiene las coordenadas de las figuras geométricas en objetos path. Los objetos path puede estar formados a su vez por otras figuras (subpath).

Cada figura se compone de:

• líneas y curvas
• figura geométrica

El punto de comienzo de una figura es el primer punto en la secuencia de líneas y curvas conectadas. A efectos de relleno y recorte, todas las figuras aparecen como cerradas, añadiendo una línea del punto final al punto inicial.

Algunos miembros de la clase GraphicsPath son:

• constructor GraphicsPath - inicializa una nueva instancia de la clase GraphicsPath.
• FillMode - obtiene o configura una enumeración FillMode que determina cómo se rellena el interior de las figuras en el objeto GraphicsPath.
• PathData - encapsula una matriz de puntos y tipos para el objeto GraphicsPath.
• AddArc - añade un arco elíptico.
• AddClosedCurve - añade una curva cerrada.
• AddCurve - añade una curva.
• AddEllipse - añade una elipse.
• AddLine - añade una línea.
• AddLines - añade una serie de líneas.
• AddPath - añade un objeto GraphicsPath.
• AddPolygon - añade un polígono.
• AddRectangle - añade un rectángulo.
• AddRectangles - añade una serie de rectángulos.

Es posible dibujar un objeto GraphicsPath con alguno de los métodos listados más arriba o con el método Graphics.DrawPath:

Public Sub DrawPath( ByVal p As Pen, ByVal path As GraphicsPath )

Parámetros que se pasan al método Graphics.DrawPath:

• p: objeto que determina color, anchura y estilo del objeto path.
• path: objeto GraphicsPath que va a ser dibujado.

Etiquetas transparentes

En algunas ocasiones puede ser conveniente que las etiquetas aplicadas sobre la imagen de un PictureBox tengan su fondo transparente.

Para que Label sea transparente, hay que establecer su propiedad BackColor en Color.Transparent. La propiedad BackColor es una propiedad de ambiente. Una propiedad de ambiente es una propiedad de control que, si no se establece, se recupera del control principal. Por ejemplo, de forma predeterminada, el control Label tendrá la misma propiedad BackColor que su control Form principal.

Si hay otro control entre el control (Label) y el primario correspondiente (Form), Label no mostrará el control situado en medio sino el control primario (Form). Por ejemplo, las etiquetas transparentes situadas sobre un PictureBox cogen el color de fondo del formulario y no el del PictureBox (que es el control intermedio). Esto quiere decir que, si colocamos una etiqueta transparente sobre un control PictureBox, la etiqueta no coge como color de fondo el color del control que tiene debajo (PictureBox) sino el color del control primario del que deriva (Form).

Podemos hacer que la etiqueta coja como color de fondo el de la imagen que tiene debajo añadiéndola al grupo de controles de PictureBox con el método Controls.Add, de esta manera PictureBox se convierte en el control primario de Label (en lugar de Form) y es con él con el que simula la transparencia:

Me.PictureBox1.Controls.Add(Me.Label1)

Enumeración ControlStyles

La propiedad BackColor no admite colores transparentes a menos que el estilo ControlStyles.SupportsTransparentBackColor (de la enumeración ControlStyles) se establezca en True. La enumeración ControlStyles especifica el estilo y el comportamiento de un control. Los controles utilizan esta enumeración en diferentes propiedades y métodos que varían su funcionalidad. Un control puede habilitar un estilo llamando al método SetStyle y pasando el estilo o estilos ControlStyles correspondientes y el valor de tipo booleano en el que va a establecerse el estilo. Por ejemplo, la siguiente línea de código habilitaría el doble búfer en el control miControl:

miControl.SetStyle ( UserPaint Or AllPaintingInWmPaint Or DoubleBuffer, True )

La siguiente línea de código habilitaría el color de fondo transparente y el doble búfer para un control Form:

Me.SetStyle(ControlStyles.ResizeRedraw Or _
ControlStyles.SupportsTransparentBackColor Or _
ControlStyles.UserPaint Or _
ControlStyles.AllPaintingInWmPaint _
Or ControlStyles.DoubleBuffer, True)

En un ejemplo real, si el bit SupportsTransparentBackColor del formulario se establece en True y la propiedad BackColor de Label se establece en color transparente, OnPaintBackground simulará la transparencia pidiendo al control primario (Form) que pinte el fondo de Label. Ésta no es una transparencia real, la transparencia se simulará sólo si se establece el bit UserPaint en true y si el control primario deriva de Control. Si UserPaint (otro miembro de ControlStyles) es True, es el propio control en lugar del sistema operativo el que se pinta a sí mismo. Este estilo sólo se aplica a las clases derivadas de Control.

Código en Visual Basic .NET

• Importamos los espacios de nombres:
  
  Imports System.Drawing
  Imports System.Drawing.Drawing2D
   
• Actuamos en el evento Paint del PictureBox.
• Creamos un objeto de la clase GraphicsPath
• Usamos el método AddEllipse para conseguir la figura de un círculo que aplicaremos sobre el control PictureBox.
• En el control PictureBox creamos una región que se corresponde con la figura del objeto GraphicsPath.
• Manipulando unas variables Integer, que se corresponden con los puntos x e y, el ancho y el alto de la figura, podemos variar su aspecto.
Configuramos tanto el tamaño como la posición de la figura en el PictureBox:

'Actuamos en el evento Paint del PictureBox. 
Private Sub pBox_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles pBox.Paint
   'creamos un objeto de la clase GraphicsPath
   Dim figura As GraphicsPath = New GraphicsPath
   'manipulando las variables que se corresponden con los puntos x e y, el ancho y el alto de la figura, podemos variar su aspecto
   Dim x, y, ancho, alto As Integer
   'anchura y altura de la figura (círculo en este caso)
   ancho = 260
   alto = 260
   'posiciones x e y de la figura (centrada en el control PictureBox)
   x = (pBox.Width - ancho) / 2
   y = (pBox.Height - alto) / 2
   'usamos el método AddEllipse para conseguir la figura de un círculo,
   'que aplicaremos sobre el control PictureBox.
   figura.AddEllipse(New Rectangle(x, y, ancho, alto))
   'en el control PictureBox creamos una región que se corresponde
   'con la figura del objeto GraphicsPath
   pBox.Region = New Region(figura)
End Sub

• Podemos mejorar el aspecto del borde redondeado aplicando antialias:
  
  e.Graphics.SmoothingMode = SmoothingMode.AntiAlias

Imagen del programa

Enlaces relacionados

Graphics.DrawPath Method (Microsoft MSDN)

Rendering a Windows Forms Control (Microsoft MSDN)

Botones Redondos Paso a Paso (Microsoft MSDN)

Espacios de nombres usados en el código de este artículo:

System.Drawing
System.Drawing.Drawing2D

Fichero con el código de ejemplo: miliuco_picturebox.zip - 170 KB

(MD5 checksum: [6ABF090CE30403AED1E681C767A4F13F])