Introducción a GDI+ El namespace System.Drawing

Transcripción

1 Introducción a En este capítulo se introduce la programación gráfica utilizando las clases del Graphics Device Interface (). es la evolución de GDI, que resultaba compleja de utilizar. En Visual Studio.NET, se puede decir que Microsoft ha cuidado, simplificado y mejorado la manera de trabajar con objetos gráficos. El namespace System.Drawing proporciona acceso a la funcionalidad básica del. Además, se proporcionan otras clases y estructuras en los namespace System.Text, System.Printing, System.Imaging, System.Drawing2D y System.Design. El namespace System.Drawing Las clases y estructuras más importantes del namespace System.Drawing son: Clases Bitmap Brush y Brushes Font FontFamily Graphics Icon Image Pen y Pens Region SolidBrush Encapsula un bitmap. Se utiliza para trabajar con imágenes. Se utilizan para rellenar áreas cerradas con un determinado patrón, color o bitmap. Define el tipo de letra Define una familia de tipos de letra con una similitud básica en el diseño y una cierta variación en el estilo. Encapsula la superficie gráfica del. Se utilizan para trabajar con iconos. Clase base abstracta que proporciona funcionalidad para las clases Bitmap, Icon y Metafile. Para dibujar líneas, curvas, figuras, etc Describe el interior de una superficie. Define un objeto brush de color simple. Estructuras Color Point y PointF Rectangle y RectangleF Size y SizeF Color ARGB. Para trabajar con puntos en el plano. Para trabajar con rectángulos. Para trabajar con las dimensiones de una figura. Enumeraciones ContentAlignment Especifica el alineamiento del contenido de una figura. 1/16 1

2 FontStyle GraphicsUnit Estilo del texto. Especifica la unidad de medida de los datos. Para trabajar con el es imprescindible comprender la clase Graphics que proporciona métodos para dibujar en la pantalla, como Rectangle y Point. Por eso, se estudiará en primer lugar. Posteriormente se explicarán las clases y estructuras más utilizadas y comunes del como Pen, Brush, Rectangle, Point, etc. Clases y estructuras del namespace System.Drawing La clase Graphics Graphics encapsula las superficies de dibujo de los formularios. Antes de dibujar cualquier objeto gráfico -un punto, una elipse o un rectágulo, etc- es necesario crear u obtener el objeto Graphics de la superficie. En general, se utiliza el evento Paint del formulario para obtener una referencia al objeto Graphics del formulario porque cuando ocurre ese evento se le pasa como argumento al método manejador un objeto de la clase PaintEventArgs que tiene una propiedad que también se llama Graphics que devuelve el objeto Graphics del formulario. private void formulario_paint(object sender, PaintEventArgs e) Graphics g = e.graphics; //código Otras formas de obtener el objeto Graphics son las siguientes: a) Sobreescrir el método OnPaint(), que es un método virtual que la clase Form hereda de la clase Control. Por ejemplo protected override void OnPaint ( PaintEventArgs e) Graphics g = e.graphics; b) Si se desea utilizar otro evento por ejemplo, si se quiere dibujar al pulsar un botón del formulario- no resulta lógico esperar a que se produzca el evento Paint. En estas situaciones, se puede obtener el objeto Graphics invocando al método CreateGraphics() del formulario. En este último caso cuando lo obtiene el programador directamente a través de CreateGraphics()- es muy importante invocar al método Dispose() al final del método, para liberar esos recursos, ya que el Garbage Collector no lo hará por defecto en este caso. No es necesario hacerlo cuando se obtiene a través de la propiedad Graphics: private void formulario_click(object sender, EventArgs e) Graphics g = this.creategraphics(); //código g.dispose(); //Muy importante liberar recursos 2/16 2

3 //cuando se utiliza este método c) El objeto Graphics se puede también obtener a través de distintos métodos estáticos de la clase System.Drawing.Graphics que aceptan como parámetro un fichero y devuelven un objeto gráfico. Graphics g = ); Métodos Una vez que se tiene la referencia del objeto Graphics se puede invocar cualquier miembro de la clase Graphics para dibujar objetos. Los métodos más importantes de esta clase son: DrawArc DrawBezier DrawCurve DrawEllipse DrawLine DrawPolygon DrawRectangle FillEllipse FillPolygon FillRectangle FillRectangles FillRegion Dibuja un arco. Dibuja una curva de Bezier. Dibuja una curva definida por un array de puntos. Dibuja una elipse. Dibuja una línea recta. Dibuja un polígono. Dibuja un rectángulo. Rellena el interior de una elipse. Rellena el interior de un polígono definido por un array de puntos. Rellena el interior de un rectángulo con un determinado Brush. Rellena el interior de una serie de rectángulos con un determinado Brush. Rellena el interior de una región. Esta clase posee más métodos para dibujar. Aquí se han señalado los más importantes. Además, tiene métodos muy útiles para trabajar con imágenes e iconos -posteriormente se estudiarán ambas clases-: Los métodos más importantes en este sentido son: DrawIcon DrawIconUnstretched DrawImage DrawImageUnscaled DrawString RotateTransform ScaleTransform TranslateTransform Dibuja un icono Dibuja un icono con su tamaño original en una determinada posición. Sitúa una imagen en la pantalla Dibuja una imagen con su tamaño original y en un determinado lugar. Escribe texto Gira la imagen un angulo especificado Aplica una escala a la imagen Desplaza la imagen 3/16 3

4 La gran mayoría de ellos están sobrecargados. Por ejemplo, considérese el método DrawIcon: Para dibujar el icono unicono en el rectángulo r. public void DrawIcon(Icon unicono, Rectangle r); Para dibujar el icono unicono en la posición (x, y). public void DrawIcon(Icon unicono, int x, int y); Otro ejemplo lo constituye el método DrawImage. Los parámetros son muy elocuentes de la función que realizan y por eso no se explicarán aquí: public void DrawImage(Image unaimagen, Point p); public void DrawImage(Image unaimagen, Rectangle r); public void DrawImage(Image unaimagen, int x, int y); public void DrawImage(Image unaimagen, int ancho, int alto); public void DrawImage(Image unaimagen, int x, int y, int ancho, int alto); Con los demás métodos sucede algo similar. Sería muy extenso definir aquí todas las definiciones de todos los métodos. Otros tres métodos de interés son: Graphics FromImage(Image unaimagen) Crea un Nuevo objeto Graphics a partir del objeto Image especificado. void Clear(Color uncolor) Rellena la superficie con el color de fondo. void Dispose() Borra el objeto Graphics y libera la memoria. Antes de comenzar a dibujar nada, es preciso definir el estilo del trabajo es decir, especificar el color, la anchura y tipo, etc de las líneas del gráfico-, utilizando las estructuras definidas en este namespace. Los principales son Brush, Pen, Font y Color. La clase Pen La clase System.Drawing.Pen sirve para especificar el ancho y el estilo de la línea de dibujo o de la figura geométrica. No sólo indica el color del trazado sino el tipo a rayas, puntos, contínua...-. Los constructores de la clase Pen son: public Pen(Color colordelinea); public Pen(Brush brocha); public Pen(Brush brocha, float anchodelinea); 4/16 4

5 public Pen(Color colordelinea, float anchodelinea); Pen unlapiz = new Pen( Color.Orange ); Pen otrolapiz= new Pen( Color.Yellow, 30 ); Sin embargo, se puede utilizar la clase System.Drawing.Pens que no tiene constructor público y se utiliza a través de sus propiedades estáticas que devuelven un objeto Pen de la anchura de un píxel. Pen lapizsolidoamarillo = Pens.Yellow; Las propiedades más importantes de la clase Pen son: Brush Color Width Define el brush (la brocha). Define el color. Define el ancho. Pen tiene otras propiedades y métodos para definir el estilo de la línea a puntos, contínua, etc- o para rotar, trasladar o escalar una imagen o figura, como por ejemplo: public void RotateTransform(float angulo); public void TranslateTransform(float dx, float dy); public void ScaleTransform(float sx, float sy); // Crea un objeto Pen Pen lapiz = new Pen(Color.Black, 5); // Dibuja un rectangulo con el Pen lapiz e.graphics.drawrectangle(lapiz, 10, 10, 100, 100); // Escala el lapiz en la direccion X lapiz.scaletransform(2, 1); // Rota 90 grados lapiz.rotatetransform(90); // Dibuja un segundo rectangulo con lapiz e.graphics.drawrectangle(lapiz, 120, 10, 100, 100); La clase Brush Esta clase proporciona funcionalidad para rellenar una determinada región o figura con el color sólido color, textura, etc- que se indique. La clase System.Drawing.Brush es una clase base abstracta y no puede ser instanciada, es decir, no se pueden crear objetos 5/16 5

6 de esta clase. Para crear un objeto Brush se debe utilizar alguna de sus clases derivadas como SolidBrush, TextureBrush o LinearGradientBrush. Brush colorsolidobeige = new SolidBrush(Color.Beige); Brush colornaranjamarron = new SolidBrush(Color.FromArgb(255,150,0)); También puede utilizarse la clase System.Drawing.Brused. No pueden crearse objetos de esta clase porque no tiene un constructor público y se utiliza a través de sus propiedades estáticas que devuelven un objeto Brush del color que se ha especificado. Brush solidoazul = Brushes.Blue; Brush solidochocolate = Brused.Chocolate; La clase Font Esta clase permite trabajar y definir las características tipo, tamaño, color, estilo, etcde letra en el objeto Graphics. Los constructores más importantes son: public Font(FontFamily familia, float tamaño); public Font(FontFamily familia, float tamaño, FontStyle estilo); public Font(string tipodeletra, float tamaño); public Font(string tipodeletra, float tamaño, FontStyle estilo); public Font(Font fuente, FontStyle estilo); FontStyle es una enumeración con los siguientes miembros: Bold Italic Regular Strikeout Underline Texto en negrita. Texto en cursiva. Texto Normal. Texto tachado. Texto subrayado 6/16 6

7 Font unafuente = new Font( Verdana, 22); Font otrafuente = new Font( Courier, 12); Si se desea que la letra asigne varios de los estilos, basta con sumar el estilo de la letra, utilizando el operador. Font segundafuente = new Font( Georgia, 22, Bold Italic); Las propiedades de Font más importantes son: Bold FontFamily Height Italic Name Size SizeInPoints Strikeout Style Underline Unit Indica si la fuente es negrita. Obtiene el FontFamily de esa fuente. Obtiene la altura de la fuente. Indica si la fuente es cursiva. Nombre de la fuente. Tamaño de la fuente.. Tamaño, en puntos, de la fuente. Indica si la fuente está tachada. Estilo de la fuente. Indica si la fuente está subrayada. Define la medida para la fuente actual. Ejemplo: protected override OnPaint(PaintEventArgs e) Graphics dc = e.graphics; Brush brochaazul = Brushes.Blue; Brush brochanegra = Brushes.Black; Font unafuente = new Font( Verdana, 22); Font otrafuente = new Font( Times New Roman, FontStyle.Italic FontStyle.Underline); dc.drawstring( Una frase, unafuente, brochaazul, 10,100); // Más codigo base.onpaint(e); Para obtener todas las fuentes del sistema, se puede utilizar la clase InstalledFontCollection, del namespace System.Drawing.Text. Esta clase tiene una propiedad, Familie, que devuelve un array con todas las fuentes disponibles del sistema. InstalledFontCollection fuentes = new InstalledFontCollection(); FontFamily[] familia = fuentes.families; foreach ( FontFamily f in familia) 7/16 7

8 //codigo La estructura Color La estructura Color está representada por un color ARGB (Alpha, Red, Green, Blue). Las propiedades son: byte A byte B byte G byte R valor del componente alpha del Color. valor del componente azul (Blue) del Color. valor del componente verde (Green) del Color. valor del componente rojo (Red) del Color. Casi todos los miembros de la estructura Color son estáticos y no es necesario crear un objeto de esta clase para trabajar con color determinado. Esta clase tiene un importante método estático sobrecargado denominado FromArgb, que define un objeto color. Este método está sobrecargado: public static Color FromArgb(int rojo, int verde, int azul); public static Color FromArgb(int alpha, Color basecolor); public static Color FromArgb(int alpha, int rojo, int verde, int azul); public static Color FromArgb(int argb); El camino más usual para representar un color es a través del primer constructor, pasándole 3 enteros entre 0 y 255, que corresponden a las cantidades de la mezcla de los colores rojo, verde y azul, donde 0 representa una cantidad de color nula y 255 la máxima, un 100% de color. Color rojo = Color.FromArgb(255, 0, 0); Color negro = Color.FromArgb(0, 0, 0); Color mezcla = Color.FromArgb(150, 200, 100); Esta clase define una serie de constantes que corresponden a los colores más comunes. Son propiedades estáticas y públicas de sólo lectura que devuelven un objeto de tipo Color con el color especificado. Por eso, es lo mismo: this.backcolor = Color.White; que: this.backcolor = Color.FromArgb(255,255,255); Hay cientos de colores definidos. 8/16 8

9 La estructura Point Esta estructura tiene dos propiedades que representan las coordenadas X e Y del punto a partir del origen. X e Y, por defecto, se representan en pixeles. Este tipo también tiene un método muy útil que es: void Offset(int dx, int dy), que traslada el punto en una cantidad dada. El constructor más usual es: public Point(int x, int y); Point p1 = new Point( 30, 30); Point p2 = new Point( 130, 250); Point p3 = new Point( 0, 0); p3.x = 15; p3.y = 45; p1.offset(100,100); System.Console.WriteLine( p1 = 0,p1); System.Console.WriteLine( p2 = 0,p2); System.Console.WriteLine( p3 = 0,p3); PointF es una estructura muy similar a Point, excepto que X e Y son de tipo float. La estructura Rectangle Esta estructura permite construir objetos que representan una región rectangular. Como sucede en la estructura Point, también se define la estructura RectangleF, que es idéntica a ésta pero que sus coordenadas son de tipo float. Los constructores de esta clase son: public Rectangle(Point esquinasupizda, Size tamaño); public Rectangle(int x, int y, int ancho, int alto); Los métodos y propiedades más importantes son: int X int Y int Left int Right int Top int Bottom int Height Coordenada x de la esquina superior izquierda del rectángulo. Coordenada y de la esquina superior izquierda del rectángulo. Coordenada x de la esquina superior izquierda.. Coordenada x de la esquina inferior derecha del rectángulo. Coordenada y de la esquina superior izquierda del rectangulo. Coordenada y de la esquina inferior derecha del rectangulo. Altura del rectangulo. 9/16 9

10 int Width Ancho del rectángulo. Point Location Coordenadas de la esquina superior izquierda del rectángulo. Size Size Tamaño del rectángulo. bool IsEmpty() Examina si Width o Height son 0. void Offset(int dx, int dy) Traslada el rectangulo. bool Contains(Point p) Devuelve true o false dependiendo de que el punto p esté situado en el interior del rectángulo que invoca al método Rectangle r = new Rectangle(0, 0, 150, 200); Point p = new Point(50, 50); if(r.contains(p)) System.Console.WriteLine( p está en el interior de r ); else System.Console.WriteLine( p está fuera de r ); La clase Size Las estructuras Size y SizeF son muy parecidas a Point y PointF. Size tiene dos campos enteros SizeF dos float- que representan una distancia horizontal y otra vertical, llamados Width y Height respectivamente. Aunque las estructuras son muy parecidas, Point se utiliza para indicar donde está algo y Size para definir su tamaño. Point punto=new Point(21,78); Size tamaño=new Size(40,50), Rectangle r=new Rectangulo(punto,tamaño); La clase Image En C# es relativamente sencillo manipular imágenes, cambiando sus tamaños, rotándolas, cortándolas, etc. La funcionalidad la proporciona la clase abstracta System.Drawing.Image. Una instancia de esta clase representa una imagen o un dibujo. No tiene ningún constructor público. Sin embargo, tiene un método, FromFile, que devuelve un objeto de esta clase si se le pasa como argumento el nombre de un fichero. Su estructura es: public static Image FromFile(string unfichero); Image unaimagen = Image.FromFile(@ c:\temporal\unafotografia.jpg ); 10/16 10

11 El fichero puede estar en cualquiera de los formatos gráficos más comunes:.bmp,.gif,.png y.jpg. La clase System.Drawing.Graphics tiene métodos para visualizar imágenes en la pantalla.por ejemplo, se puede utilizar el método DrawImageUnscaled: g. DrawImageUnscaled(unaImagen, unpunto); donde, g es el dispositivo gráfico el objeto Graphics- y unpunto es un objeto de tipo Point, que representa la esquina superior izquierda de la imagen en el contenedor. Métodos public static Image FromFile(string fich) Devuelve un objeto Image desde el fichero especificado. Es un método estático. public void Save(string unfichero) Salva la imagen con el nombre que se especifica Propiedades int Height Obtiene la altura del objeto Image. De sólo lectura Size Size Obtiene la dimensión de la imágen. int Width Obtiene la anchura del objeto Image. De sólo lectura Ejemplos A continuación se implementan dos ejemplos básicos para ilustrar estas ideas. En primer lugar se trata de un formulario que presenta el fichero gráfico (Figura 19.1) 11/16 11

12 Figura Evento Resize de un formulario que visualiza un fichero gráfico. Para ello, se siguen los siguientes pasos: a) Cree un nuevo proyecto y denomínelo como GDIAplicacionUno. b) Añada un campo privado a la clase Form1: private Image unaimagen; c) En el constructor del formulario, escriba las líneas siguientes: unaimagen=image.fromfile(@"c:\muestra.jpg"); Nota: Puede cambiar el argumento del método FromFile y sustituirlo por cualquier fichero gráfico que se tenga en el PC en el que se realice el ejemplo. d) La imagen se presenta en el evento OnResize(). Escriba el siguiente código en dicho evento; private void Form1_Resize(object sender, System.EventArgs e) Graphics g=creategraphics(); Image unaimagen=image.fromfile(@"c:\temporal\muestra.jpg"); g.drawimage(unaimagen,0,0,this.size.width,this.size.height); g.dispose(); e) Además es importante modificar el método Dispose() del formulario para eliminar de memoria la referencia al objeto Image, porque ocupa gran cantidad de memoria. Se debe hacer esto siempre que no se necesite la imagen. Para ello, añada al final del método la siguiente línea: 12/16 12

13 unaimagen.dispose(); El código completo es el siguiente: using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; namespace AplicacionGDIUno public class Form1 : System.Windows.Forms.Form private Image unaimagen; private System.ComponentModel.Container components = null; public Form1() InitializeComponent(); unaimagen=image.fromfile(@"c:\muestra.jpg"); this.backgroundimage=unaimagen; protected override void Dispose( bool disposing ) if( disposing ) if (components!= null) components.dispose(); base.dispose( disposing ); unaimagen.dispose(); #region Windows Form Designer generated code private void InitializeComponent() // // Form1 // this.autoscalebasesize=new System.Drawing.Size(5,13); this.clientsize = new System.Drawing.Size(292, 273); this.name = "Form1"; this.text = "Form1"; this.resize+=new System.EventHandler(Form1_Resize); #endregion [STAThread] static void Main() Application.Run(new Form1()); private void Form1_Resize(object sender, EventArgs e) 13/16 13

14 Graphics g=creategraphics(); Image g.drawimage(unaimagen,0,0, this.size.width,this.size.height); g.dispose(); A continución se implementa otra aplicación que dibuja un rectágulo y un círculo cuando se pulsa un botón y cuando se redimensiona la ventana con unas coordenadas y dimensiones especificadas en unos cuadros de texto (ver figura 19.2). Para ello, cree un nuevo proyecto, de nombre GDIAplicacionDos Sitúe dos controles GroupBox y dentro de ellos cuatro etiquetas y cuatro cajas de texto como se indica en la figura 19.2: Figura Aspecto final de la aplicación AplicacionGDIDos Asigne los textos Dimensiones rectangulo y Dimensiones elipses a los GroupBox y déje sus nombres por defecto. Déje las etiquetas con la propiedad Name que tienen por defecto, pero cambie en todas ellas las propiedad Autosize a true y pónga su propiedad Text con los textos que se indican en la figura En el GroupBox de la parte superior que define las dimensiones del rectángulo, asigne a la propiedad Text de las cajas de texto los valores siguientes: 10, 10, 50, 50 14/16 14

15 y asigne las siguientes propiedades Name a cada una de ellas: txtx, txty, txtancho y txtalto. Haga lo mismo en el grupo de la parte inferior, pero asigne las siguientes propiedades Name a las cajas de texto: txtpaintx, txtpainty, txtpaintancho, txtpaintalto y deje los siguientes valores de la propiedad Text: 100, 100, 30, 30. En el evento Paint del formulario, escriba el siguiente código: protected override void OnPaint(PaintEventArgs e) //Obtiene el objeto Graphics Graphics g=e.graphics; //Obtiene las dimensiones de la elipse int x=int.parse(txtpaintx.text); int y=int.parse(txtpainty.text); int ancho=int.parse(txtpaintancho.text); int alto=int.parse(txtpaintalto.text); Rectangle r=new Rectangle(x,y,ancho,alto); //Define una brocha y un lápiz Brush brocha=brushes.blue; Pen lapiz = new Pen(brocha,5); //Dibuja el rectángulo g.drawellipse(lapiz,r); Añada ahora un botón cuya propiedad Name sea btndibujar y la propiedad Text Dibujar y añada el siguiente código al evento Click: private void btndibujar_click(object sender, System.EventArgs e) //obtiene el objeto Graohics Graphics g=creategraphics(); //Obtiene las dimensiones del rectangulo int x=int.parse(txtx.text); int y=int.parse(txty.text); int ancho=int.parse(txtancho.text); int alto=int.parse(txtalto.text); Rectangle r=new Rectangle(x,y,ancho,alto); //Define una brocha Brush brocha=brushes.yellow; //Dibuja el rectángulo g.fillrectangle(brocha,r); //libera los recursos g.dispose(); En este ejemplo se puede apreciar bien la funcionalidad del evento Paint. Este evento se produce siempre que se tenga que dibujar el formulario. Por eso, al principio se dibuja una elipse en este caso una circunferencia- de las dimensiones especificadas. Aunque se cambien las dimensiones, no se vuelve a dibujar. Para hacerlo, es necesario que se minimice el formulario y se vuelva a su tamaño original o bien que se pase con 15/16 15

16 otra ventana de otro programa por encima del formulario y entonces, necesitará redibujarse. Sin embargo, cuando se pulsa el botón se dibuja el rectángulo con las dimensiones indicadas. Cada vez que se pulsa el botón, no se refresca la pantalla y se dibuyja el rectángulo superpuesto al anterior. Para evitar esto, es necesario que se ejecute de nuevo el método OnPaint. 16/16 16