framework .net 3.5 12 uso de system.drawing

Uso de System.Drawing

A menudo es necesario personalizar el aspecto de nuestras aplicaciones, para ello .NET Framework nos suministra el espacio de nombres System.Drawing en el que podemos encontrar clases con las funcionalidades necesarias para crear y manipular aspectos gráficos, imágenes, efectos personalizados y controles personalizados.

El módulo está organizados en:

Principios de dibujo

Líneas y figuras

Iconos y Bitmaps

Uso de System.Drawing - Principios

El espacio de nombres System.DrawingCaracterísticas comunes de las clases del espacio de nombres:

Clases que representan elementos habituales de dibujo.

Estructuras que usaremos para dibujar líneas, figuras e imágenes.

Enumeraciones que representan los colores y estilos habituales.

.NET Framework suministra el espacio de nombre System.Drawing para habilitar la creación y manipulación de objetos gráficos, con clases, estructuras y enumeraciones que usaremos para desarrollar un interfaz bidimensional (2D).Los tipos de este espacio de nombres implementan un wrapper arropando los objetos de la librería del interfaz gráfico de dispositivo no manejado (GDI+).


Nombre Tipo Descripción

Bitmap Clase Para trabajar con imágenes basadas en píxeles.

Brush Clase Para rellenar el interior de los elementos gráficos.

Font Clase Formato que se aplica a los textos (tamaño, tipo y color).

FontFamily Clase Grupo de fuentes con aspecto o estilo similar.

Graphics Clase La superficie en la que dibujamos.

Icon Clase Un icono que usemos en la aplicación.

Pen Clase Para dibujar líneas y curvas.

SolidBrush Clase Un pincel de color único para rellenar figuras.

TextureBrush Clase Un pincel que rellena las figuras con una imagen.

Color Estructura Un color Alpha (RedGreenBlue).

Point Estructura Dos enteros que definen un punto.

PointF Estructura Dos valores de coma flotante para definir un punto.

Rectangle Estructura Cuatro enteros, superior izquierda e inferior derecha, para definir un rectángulo.

RectangleF Estructura Cuatro coordenadas de coma flotante para definir un rectángulo

Size Estructura Tamaño de un objeto (ancho y alto), enteros.

SizeF Estructura Tamaño de un objeto (ancho y alto), coma flotante.

FontStyle Enumeración Estilos aplicables a las fuentes.

KnowColor Enumeración Colores predefinidos del sistema.


Uso de las estructuras Point y Size

Size:

[Visual C#]Size tallaForma = new Size(10,20);[Visual Basic]Dim tallaForma As New Size(10,20)

Suministra valores dimensionales

Representa el ancho y alto de un objeto

Point:

[Visual C#]Point puntoInicial = new Point(1,2);[Visual Basic]Dim puntoInicial As New Point(1,2)

Suministra valores posicionalesRepresenta las coordenadas X e Y en 2-DRelativo a la esquina superior izquierda del objeto gráfico contenedor

x y

y

x

ancho alto ancho

alto


Uso de las estructuras Point y Size

Size tallaUno = new Size(10, 10);Dim tallaUno As New Size(10, 10)Size tallaDos = tallaUno + new Size(5,5);Dim tallaDos As Size = tallaUno + New Size(5, 5)tallaDos -= new Size(3,3);tallaDos -= New Size(3, 3)

Point inicio = new Point(1, 1);Dim inicio As New Point(1, 1)Point fin = inicio + tallaDos;Dim fin As Point = inicio + tallaDosfin -= new Size(10,10);fin -= New Size(10, 10)

int x = fin.X;Dim x As Integer = fin.Xint y = fin.Y;Dim y As Integer = fin.Y

int ancho = tallaDos.Width;Dim ancho As Integer = tallaDos.Widthint alto = tallaDos.Height;Dim alto As Integer = tallaDos.Height

(10,10)

(15,15)

(12,12)

(1,1)

(13,13)

(3,3)

(3)

(3)

(12)

(12)


Creación de pinceles y lápices

Brushes:

Pens:

Se usan para especificar la propiedad Fill de una forma con un color o un efecto

Usar las clases SolidBrush, LinearGradientBrush, TextureBrush, o HatchBrush

Se usan para dibujar líneas y curvas.

Se ha de especificar la propiedad Width de la clase Pen.

Para definir el estilo de la línea disponemos de la enumeración DashStyle.

Podemos especificar el color del lápiz.


Creación de pinceles y lápices

Crear un objeto Color:Color colorPersonal = Color.Black;colorPersonal = Color.FromArgb(255,0,0,0);colorPersonal = Color.FromKnownColor(KnownColor.Black);colorPersonal = Color.FromName("Black");

Creando pinceles:Brush pincel = new SolidBrush(Color.Black);Brush pincelDegradado = new LinearGradientBrush(new Point(0, 0), new Point(100, 100),Color.Black, Color.Red);Color colorPrimerPlano = Color.Red;Color colorFondo = Color.Black;Brush pincelSombreado = new HatchBrush(HatchStyle.BackwardDiagonal, foreColor,backColor);Image imagen = Image.FromFile("<RutaArchivo>");Brush PincelConTextura = new TextureBrush(imagen);

Creando lápices:Pen lapiz;Brush pincelPersonal = new SolidBrush(Color.Black)Color colorPersonal = Color.Black;lapiz = new Pen(pincelPersonal );lapiz = new Pen(colorPersonal );lapiz = new Pen(pincelPersonal , float ancho);lapiz = new Pen(colorPersonal , float ancho);lapiz = new Pen(pincelPersonal );lapiz.DashStyle = DashStyle.DashDot; (Enumeración DashStyle: Custom, Dash, DashDot, DashDotDot, Dot y Solid)


Creación y uso de un objeto gráfico

Crear un objeto Graphics (lienzo/canvas) con el método CreateGraphics de un objeto Windows Forms o un control que admita gráficos.

Acceder a los objetos Graphics disponibles mediante eventos orientados a gráficos.

Efectuar llamadas a los métodos del objeto Graphics para dibujar en él.


Creación y uso de un objeto gráfico[Visual C#]Pen lapiz = new Pen(Color.Black);private void Form1_Paint(object sender, PaintEventArgs e) {

e.Graphics.DrawLine(lapiz, new Point(2, 2), new Point(100, 100));}[Visual Basic]Dim lapiz As Pen = New Pen(Color.Black)Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs)

e.Graphics.DrawLine(lapiz, New Point(2, 2), New Point(100, 100))End Sub


Uso de fuentes

Para usar una fuente:

Crear un pincel (brush).

Crear una instancia de la clase FontFamily.

Crear una instancia de la clase Font utilizando la instancia de FontFamily y un coma flotante para el tamaño.

Llamar al método DrawString del objeto Graphics utilizando el pincel, la fuente y una nueva estructura PointF.


Uso de fuentes[Visual C#]Brush pincel = new SolidBrush(Color.Black);FontFamily familia = new FontFamily("Arial");Font fuente = new Font(familia, 14.0f);Graphics grafico = this.CreateGraphics();grafico.DrawString("Hello World", fuente, pincel, new PointF(10.0f,10.0f));

[Visual Basic]Dim pincel As Brush = New SolidBrush(Color.Black)Dim familia As FontFamily = New FontFamily("Arial")Dim fuente As Font = New Font(familia,14.0f)Dim grafico As Graphics = Me.CreateGraphics()grafico.DrawString("Hello World", fuente, pincel,New PointF(10.0f,10.0f))

Uso de System.Drawing – Líneas y figuras

Dibujando líneas

Dibujando rectángulos

Dibujando una elipse

Dibujando un diagrama de tarta.NET Framework nos provee de la capacidad para dibujar líneas y figuras en el interfaz de usuario, las cuales nos permiten personalizar el aspecto de nuestras aplicaciones.

El objeto Graphics nos da una serie de métodos que son los que nos permiten dibujar esas formas en nuestros formularios y controles.

Podemos utilizar dichos métodos para dibujar líneas, rectángulos, elipses y diagramas de tarta en el interfaz.


Dibujando líneas

Para dibujar una línea:

Usar un objeto Pen y dos estructuras Point para llamar al método DrawLine.

Graphics grafico = this.CreateGraphics();Brush pincel = new SolidBrush(Color.Black);Pen lapiz = new Pen(pincel);grafico.DrawLine(lapiz, new Point(10, 10), new Point(100, 100));


Dibujando líneas

Para dibujar múltiples líneas:

Usar un objeto Pen y un array de estructuras Point para llamar al método DrawLines.

Graphics grafico = this.CreateGraphics();Brush pincel = new SolidBrush(Color.Black);Pen lapiz = new Pen(pincel);Point[] puntos = new Point[4];puntos[0] = new Point(10,10);puntos[1] = new Point(100,100);puntos[2] = new Point(10,150);puntos[3] = new Point(100,150);grafico.DrawLines(lapiz, puntos);


Dibujando y rellenando rectángulos

DrawRectangleDrawRectanglesFillRectangleFillRectangles


Dibujando y rellenando rectángulos

DrawRectangle

grafico.DrawRectangle(pen, 2, 2, 50, 50);Rectangle rectangulo = new Rectangle(new Point(26, 26),

new Size(75, 100));grafico.DrawRectangle(lapiz, rectangulo);

DrawRectanglesRectangle[] rectangulos = new Rectangle[2];rectangulos[0] = new Rectangle(2, 2, 50, 50);rectangulos[1] = new Rectangle(10, 10, 75, 75);grafico.DrawRectangles(lapiz, rectangulos);

FillRectangleBrush pincel = new SolidBrush(Color.Yellow);Rectangle rectangulo = new Rectangle(new Point(26, 26),

new Size(75, 100));grafico.FillRectangle(pincel, rectangulo);



Para dibujar una elipse:

Crear un objeto Pen o Brush para la elipse.

Crear un objeto Rectangle para contener la elipse.

Llamar a los métodos DrawEllipse o FillEllipse del objeto Graphics.

FillEllipseDrawEllipse



DrawEllipsePen lapiz = new Pen(Color.Green);Rectangle rectangulo = new Rectangle(new Point(10,10),

new Size(100,75));graphic.DrawEllipse(lapiz, rectangulo);

FillEllipseBrush pincel = new SolidBrush(Color.Blue);Rectangle rectangulo = new Rectangle(new Point(10,10),

new Size(75,100));graphic.FillEllipse(pincel, rectangulo);


Dibujando un diagrama de tarta

Usar los métodos DrawPie(Pen) o FillPie(Brush)

Usar un objeto Rectangle para definir el área en la que queremos dibujar el diagrama

Suministrar ángulos de inicio y desplazamiento para definir el tamaño de la porción a dibujar

0

90

180

270


Dibujando un diagrama de tarta

[Visual C#]Brush pincel = new SolidBrush(Color.Red);Pen lapiz = new Pen(Color.Black, 3.0f);Rectangle rectangulo = new Rectangle(new Point(10, 10), new Size(200, 200));graphic.FillPie(pincel, rectangull, 270.0f, 90.0f);graphic.DrawPie(lapiz, rectangulo, 270.0f, 90.0f);

[Visual Basic]Dim pincel As Brush = New SolidBrush(Color.Red)Dim lapiz As Pen = New Pen(Color.Black,3.0f)Dim rectangulo As Rectangle = New Rectangle(New Point(10,10),New Size(200,200))graphic.FillPie(pincel, rectangulo, 270.0f, 90.0f)graphic.DrawPie(lapiz, rectangulo, 270.0f, 90.0f)

Uso de System.Drawing – Iconos y bitmaps

Las clases Image y BitmapCrear, dibujar y salvar un BitmapAlmacenar ImagesUsar iconos en una aplicación

El interfaz de usuario integra gráficos sencillos tales como líneas y rectángulos y, a menudo, incluye gráficos profesionales que aportan un remate a nuestra aplicación.

.NET Framework nos da la habilidad para cargar y manipular imágenes, del tipo logotipos o texturas, frecuentemente vistas en las aplicaciones.

Las clases Image y Bitmap

Hallaremos la clase ImageFormat en el espacio de nombres System.Drawing.Imaging

La clase Image es una clase abstracta

Los métodos Image.FromFile e Image.FromStream crean una instancia de la clase Image

La clase Bitmap hereda de Image

La clase Bitmap tiene los métodos GetPixel y SetPixel



Creación, dibujo y salvado de un Bitmap

Crearemos un objeto Bitmap utilizando un objeto Image, una cadena de caracteres o una instancia de System.IO.Stream

Dibujaremos un mapa de bits mediante el método DrawImage del objeto Graphics

Podremos salvar el objeto Bitmap utilizando el método Save


Creación, dibujo y salvado de un Bitmap

Creación de un objeto BitmapBitmap bitmap = new Bitmap(@"FilePath");

Dibujando el objeto Bitmapgraphic.DrawImage(bitmap, new Point(10, 10));

Salvando el Bitmapbitmap.Save(@"Path\image.jpg",ImageFormat.Jpeg);

ImageFormat: Windows bitmap (BMP) Windows Enhanced Metafile (EMF) Exchangeable Image File (Exif) Graphics Interchange Format (GIF) Windows icon (ICO) JPEG MemoryBmp Portable Network Graphics (PNG) TIFF Windows Metafile (WMF)


Almacenamiento de imágenes

En algunas situaciones podemos experimentar un parpadeo o retraso al mostrarse el interfaz de usuario. Esto ocurre cuando el sistema dibuja en el formulario o control.Primero se dibuja el fondo, limpiando lo anterior, después es cuando se produce el dibujo que hayamos especificado. Este es el motivo del parpadeo, el doble dibujo consecutivo.Es evidente que tenemos que evitar esto ya que genera una mala experiencia de usuario.La técnica del doble buffer elimina este doble dibujado al realizar la operación en un objeto en memoria, dibujando en el formulario o control cuando el dibujo está completo..NET Framework nos permite utilizar esta técnica manual o automáticamente.

this.SetStyle( ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.DoubleBuffer,true);

[Visual C#][Visual C#]

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

[Visual Basic][Visual Basic]

En el constructor, llamar al método SetStyle del formulario.Doble buffer para evitar el parpadeo:


Uso de iconos en una aplicación

Para dibujar un icono en un objeto Graphics habremos de utilizar sus métodos DrawIcon o DrawIconUnstretched.

Para asignar un objeto Icon como icono del formulario, habremos de utilizar la propiedad Icon del mismo

Dispondremos de los iconos comunes del sistema en la clase SystemIcons


Uso de iconos en una aplicación

Fijando la propiedad Icon de un formulario:Icon icono = new Icon(@"Path\icono.ico");this.Icon = icono;

Dibujando iconos:Icon icono = new Icon(@"Path\icono.ico");Rectangle rectangulo = new Rectangle(new Point(10,10),

new Size(80,80));graphic.DrawIcon(icono, rectangulo);graphic.DrawIconUnstretched(icono, rectangulo);

Uso de los iconos del sistema:Rectangle rectangulo = new Rectangle(new Point(10, 10),

new Size(50, 50));graphic.DrawIcon(SystemIcons.Question, rectangulo);

framework .net 3.5 12 uso de system.drawing

Technology