Objetos Grficos

En pginas anteriores ya se ha mostrado cmo escribir applets, cmo lanzarlos y los fundamentos bsicos de la presentacin de informacin sobre ellos. Ahora, pues, querremos hacer cosas ms interesantes que mostrar texto; ya que cualquier pgina HTML puede mostrar texto. Para ello, Java proporciona la clase Graphics, que permite mostrar texto a travs del mtodo drawString(), pero tambin tiene muchos otros mtodos de dibujo. Para cualquier programador, es esencial el entendimiento de la clase Graphics, antes de adentrarse en el dibujo de cualquier cosa en Java. Esta clase proporciona el entorno de trabajo para cualquier operacin grfica que se realice dentro del AWT. Juega dos importantes papeles: por un lado, es el contexto grfico, es decir, contiene la informacin que va a afectar a todas las operaciones grficas, incluyendo los colores de fondo y texto, la fuente de caracteres, la localizacin y dimensiones del rectngulo en que se va a pintar, e incluso dispone de informacin sobre el eventual destino de las operaciones grficas (pantalla o imagen). Por otro lado, la clase Graphics proporciona mtodos que permiten el dibujo de primitivas, figuras y la manipulacin de fonts de caracteres y colores. Tambin hay clases para la manipulacin de imgenes, doble-buffering, etc. Para poder pintar, un programa necesita un contexto grfico vlido, representado por una instancia de la clase Graphics. Pero, como esta clase es abstracta, no se puede instanciar directamente; as que debemos crear un componente y pasarlo al programa como un argumento a los mtodos paint() o update(). Los dos mtodos anteriores, paint() y update(), junto con el mtodo repaint() son los que estn involucrados en la presentacin de grficos en pantalla. El AWT, para reducir el tiempo que necesitan estos mtodos para realizar el repintado en pantalla de grficos, tiene dos axiomas:

Primero, el AWT repinta solamente aquellos Componentes que necesitan ser repintados, bien porque estuviesen cubiertos por otra ventana o porque se pida su repintado directamente Segundo, si un Componente estaba tapado y se destapa, el AWT repinta solamente la porcin del Componente que estaba oculta

En la ejecucin del applet que aparece a continuacin, EjemploGraf.java, podemos observar como se realiza este proceso. Ignorar la zona de texto de la parte superior del applet de momento, y centrar la mirada en la parte coloreada. Utilizando otra ventana, tapar y destapar parte de la zona que ocupa el applet. Se observar que solamente el trozo de applet que estaba cubierto es el que se repinta. Yendo un poco ms all, solamente aquellos componentes que estn ocultos y se vuelvan a ver sern los que se repinten, sin tener en cuenta su posicin dentro de la jerarqua de componentes.

La pantalla en Java se incrementa de izquierda a derecha y de arriba hacia abajo, tal como muestra la figura:

Los pixels de la pantalla son pues: posicin 0 + ancho de la pantalla - 1. En los textos, el punto de insercin se encuentra en la lnea base de la primera letra.

Mtodos para Dibujos

Vamos a presentar mtodos para dibujar varias figuras geomtricas. Como estos mtodos funcionan solamente cuando son invocados por una instancia vlida de la clase Graphics, su mbito de aplicacin se restringe a los componentes que se utilicen en los mtodos paint() y update(). Normalmente los mtodos de dibujo de primitivas grficas funcionan por pares: un mtodo pinta la figura normal y el otro pinta la figura rellena.
drawLine( x1,y1,x2,y2 ) drawRect( x,y,ancho,alto ) fillRect( x,y,ancho,alto ) clearRect( x,y,ancho.alto ) drawRoundRect( x,y,ancho,alto,anchoArco,altoArco ) fillRoundRect( x,y,ancho,alto,anchoArco,altoArco ) draw3DRect( x,y,ancho,alto,boolean elevado ) fill3DRect( x,y,ancho,alto,boolean elevado ) drawOval( x,y,ancho,alto ) fillOval( x,y,ancho,alto ) drawArc( x,y,ancho,alto,anguloInicio,anguloArco ) fillArc( x,y,ancho,alto,anguloInicio,anguloArco ) drawPolygon( int[] puntosX,int[] puntosY[],numPuntos ) fillPolygon( int[] puntosX,int[] puntosY[],numPuntos ) drawString( string s,x,y ) drawChars( char data[],offset,longitud,x,y ) drawBytes( byte data[],offset,longitud,x,y ) copyArea( xSrc,ySrc,ancho,alto,xDest,yDest )

http://www.ulpgc.es/otros/tutoriales/java/Cap5/grafico.html

clase Graphics.
En este artculo nos centraremos en conocer qu es y cmo trabaja la clase Graphics. Dicha clase, que pertenece al paquete java.awt es el sistema bsico para todas las operaciones relacionadas con el uso de grficos en Java y soporta un gran surtido de mtodos posibilitndole al programador dibujar o colocar imgenes dentro de un componente. Veremos tambin las tcnicas y mtodos que se emplean para "pintar" y en el ejemplo mostrar algunas de las formas bsicas que esta clase nos proporciona.

La clase Graphics.
La clase Graphics es el sistema bsico de todas las operaciones grficas por lo que parece fundamental que se entienda bien su concepto antes de ponernos a tratar grficos o imgenes. Esta clase abstracta tiene la misin de conformar el contexto grfico y la de proporcionar los mtodos necesarios para poder dibujar en la pantalla.

El contexto grfico.
Consiste en encapsular la informacin necesaria para las operaciones de renderizado bsicas, es decir, toda la informacin que afecte a las operaciones de dibujado conforma el contexto grfico y la salida a la ventana en la que se va a dibujar tiene que pasar por este contexto. Incluye las siguientes propiedades ms importantes:

El objeto Component sobre el que se va a dibujar. Puede ser la ventana principal de un applet, de un frame o de una ventana hija. Un origen de coordenadas. Se especifican en pixels y comienzan en la esquina superior izquierda (0,0). No obstante, recordar que las coordenadas son relativas a la ventana en la que estemos trabajando ya que la posicin real que ocupa una ventana madre en la pantalla no tiene porqu ser la misma que la de una ventana hija que despleguemos en algn momento. El "clipping". Esto no es ms que una ventana (un rectngulo invisible) sobre el que vamos a poder pintar o renderizar nuestras imgenes. Todo lo que quede fuera ser cortado (clipped). Los colores del fondo y el primer plano (backgroun y foreground). Por defecto son negro y blanco respectivamente. La fuente de texto. Por defecto es la fuente Dialog, estilo plano y 12 pulgadas.

Pero para dibujar, nuestro programa necesita un contexto grfico vlido que vendr dado a travs de una instancia o ejemplar de la clase Graphics. El problema es que al ser una clase abstracta, sta no se puede instanciar directamente por lo que lo que habr que hacer es pasarle el contexto al programa a travs de los mtodos paint() o update() o bien, que el programa obtenga el contexto mediante el mtodo getGraphics() de la clase Component(). En este artculo nosotros obtendremos una instancia de la clase Graphics a travs de los mtodos paint() o update().

Los mtodos

Graphics nos debe proporcionar todos los mtodos necesarios para poder dibujar formas bsicas, texto con todas las fuentes que tiene el sistema as como permitirnos cargar imgenes. Todo lo que portemos a la ventana de renderizado se har a travs de estas funciones.

paint(), repaint() y update().

Estos 3 mtodos son los encargados de mostrar los grficos. Java nos proporciona una versin por defecto en la clase Component por lo que tendremos que sobrecargar update() y paint() para que nuestro programa pinte lo que deseemos y como queramos. Cuando el usuario llama al mtodo repaint() de un componente, el AWT (recondando que Swing es "algo asi" como una extensin de AWT) llama al mtodo update() de ese componente, que por defecto llama al mtodo paint().

paint().
Su sintxis es:
public void paint(Graphics g)

Es el responsable de dibujar las imgenes. Normalmente es el sistema operativo el que lo llama al dibujar la ventana por primera vez, volvindolo a llamar cada vez que entiende que la ventana o una parte de ella debe ser redibujada (por ejemplo, por haber estado tapada por una ventana y quedar de nuevo a la vista). Esta llamada la hace a travs del mtodo update().

update().
Su sintxis es:
public void update(Graphics g)

Este mtodo se llama en respuesta a una solicitud por parte del mtodo repaint(), por el AWT o por el programador cuando ha realizado un cambio en la ventana de renderizacin y necesita que se dibuje de nuevo. La implementacin por defecto trabaja "borrando" la escena actual mediante un repintado del mismo color que el de background y luego llama al mtodo paint() para pintar la nueva escena. Esta tcnica provoca el molesto efecto llamado parpadeo (flickering) el cual se puede solucionar redefiniendo el mtodo update() de manera que solo actualice la zona de pintado donde se han hecho modificaciones, o bien, como veremos en un artculo posterior, empleando la tcnica del doble buffer.

repaint().
Su sintxis es:
public void repaint() public void repaint(long tm)

public void repaint(int x, int y, int w, int h) public void repaint(long tm, int x, int y, int w, int h)

Este mtodo solicita que un componente sea repintado llamando lo ms pronto posible al mtodo update() del componente. De las posibles sintxis que disponemos se extrae que el repintado puede ser inmediato, transcurrido un tiempo (mseg) o repintar solo la zona rectangular especificada en los parmetros. Esta ltima tcnica es de gran utilidad cuando el repintado de la escena consume mucho tiempo, as solo repintamos la franja que se haya modificado. Para reducir el tiempo que se tarda en repintar, el AWT toma dos tcnicas:

Repintar solo aquellos componentes que necesitan repintarse, bien porque se han cubierto por otro componente o bien porque el programador as lo solicit. Si un componente se tapa parcialmente por otro, cuando se le devuelve a primer plano, solo se repinta la zona cubierta.

Redibujar en Swing.
Todo lo dicho anteriormente necesita ser ligeramente corregido en caso de trabajar con componentes Swing, es decir, si vamos a pintar sobre un JFrame o un JApplet. Esto se debe a que estas dos clases definen su propio mtodo update(Graphics g) pero ste lo que hace es tan solo llamar al mtodo paint(), es decir, no limpia la pantalla cada vez que se necesita repintar la escena como ocurra con AWT. Se hace por tanto necesario sobrecargar este mtodo como se puede ver en el ejemplo.

Ponindolo todo junto.

En el siguiente ejemplo se muestran algunas de las primitivas grficas que la clase Graphics incorpora. No las comento en el artculo porque su sintxis es sencilla. La explicacin de todas y cada una de ellas lo puedes encontrar en las especificaciones HTML del API de Java. As mismo, seguiremos el movimiento del ratn por la ventana de pintado para ver cmo actua el mtodo repaint() y cmo implementar un mtodo update() que reduzca lo ms posible el parpadeo (flickering) (aunque cada problema requerir su solucin particular).
//Fichero FormasBasicas.java /* <applet code = "FormasBasicas" width = 600 height = 300> </applet> */ import java.awt.Graphics; import java.awt.Color; import java.awt.Dimension; import java.awt.event.MouseEvent; import java.awt.event.MouseMotionListener; import javax.swing.JApplet;

public class FormasBasicas extends JApplet implements MouseMotionListener { Dimension d; int coordX[] = {250,350,330,350,250,270,250}; int coordY[] = {100,100,125,150,150,125,100}; int puntos = 7; //variables para almacenar la posicin actual del mouse int posX = 0, posY=0; //variables para recordar la posicin anterior del mouse int memX = 0, memY=0; public void init() { d = this.getSize(); addMouseMotionListener(this); } public void mouseDragged(MouseEvent me) {} public void mouseMoved(MouseEvent me) { this.showStatus("Coordenadas en : " +me.getX() + ", " + me.getY()); posX = me.getX(); posY = me.getY(); this.repaint(); } /* En esta implementacin de update() trato de "disimular" el flickering, para ello voy borrando el rastro que va dejando el mouse repintndolo de blanco. */ public void update(Graphics g) { g.setColor(Color.black); g.drawLine(0,posY,d.width-1,posY); g.drawLine(posX,0,posX,d.height-1); g.setColor(Color.white); if (memY != posY) { g.drawLine(0,memY,d.width-1,memY); memY = posY; } if (memX != posX) { g.drawLine(memX,0,memX,d.height-1); memX = posX; } g.setColor(Color.black); this.paint(g); } /* Este es el update() bsico, como trabaja en el AWT, solo que lo he implementado porque estoy trabajando con Swing. Juega con ambos para que observes la diferencia y lo molesto que puede llegar a ser el parpadeo. */

/*public void update(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,d.width-1,d.height-1); g.setColor(Color.black); g.drawLine(0,posY,d.width-1,posY); g.drawLine(posX,0,posX,d.height-1); this.paint(g); }*/ /* Aqu pintamos todas las figuras. Observa que al pasar por las figuras slidas las lneas que nos sealan la posicin del ratn parpadean y/o desaparecen. Podramos haber puesto todo este cdigo dentro del mtodo update() y haber reducido aun ms el efecto del parpadeo. */ public void paint(Graphics g) { g.drawRect(0,0,d.width-1,d.height-1); g.drawLine(10,10,110,60); g.setColor(Color.green); g.fillRect(130,10,100,50); g.setColor(Color.orange); g.drawRoundRect(250,10,150,50,20,20); g.setColor(Color.blue); g.fillArc(10,100,100,50,90,270); g.setColor(Color.magenta); g.drawOval(130,100,100,50); g.setColor(Color.red); g.fillPolygon(coordX,coordY,puntos); g.setColor(Color.gray); g.drawString("Linea",10,80); g.drawString("Rectangulo slido",130,80); g.drawString("Rectngulo redondeado",250,80); g.drawString("Arco slido",10,170); g.drawString("Elipse",130,170); g.drawString("Un poligono propio",250,170); g.drawString("Este texto queda cortado", d.width-60,170); } }

Puedes conseguir el cdigo fuente de este artculo aqu: cdigo Si tienes instalado el plug-in de Java2 en tu ordenador puedes comprobar el applet aqui: applet

http://www.javahispano.org/contenidos/es/graficos_en_java_parte_1/