1.00 Clase 17. Introducción a la API de gráficos 2D de Java. Anuncios. Boletín de problemas 5: compruebe la web

Transcripción

1 1.00 Clase 17 Introducción a la API de gráficos 2D de Java Anuncios Boletín de problemas 5: compruebe la web En los problemas 1 y 2, no es necesario que utilice clases internas anónimas si prefiere utilizar getsource() en sus métodos actionperformed(), para determinar el origen del evento. En el problema 2, hemos decidido facilitarle una de las dos clases que le pedimos que escribiese BusDrawing. La puede descargar de la web. Si lo desea, también puede utilizar su versión. 2 1

2 Los orígenes de la API de gráficos 2D de Java La herramienta original de la GUI de Java, la AWT, era una solución rápida y poco fiable. Utilizaba componentes de pares nativos para dibujar todos los controles. Swing dibuja todos los componentes excepto los contenedores de alto nivel, que utilizan los métodos de Java en vez de basarse en controles específicos de la plataforma. Para hacer esto, Swing necesitaba mejores gráficos. La API 2D de Java surgió como tecnología instrumental para Swing. Existe también ahora una API 3D de Java. Consulte el tutorial en: 3 Arquitectura gráfica de Java Swing AWT para Java API de gráficos 2D de Java Sistema de ventanas de la plataforma Arquitectura de gráficos de la plataforma 4 2

3 NgonApp Diseño personalizado Componentes de Swing: JLabel y JTextField 5 En qué momentos se dibuja una GUI? En la pantalla de inicio (no necesariamente cuando el programa se arranca). Cuando la visualización varía. Por ejemplo, cuando la ventana o parte de ella queda oculta tras otra y luego vuelve a mostrarse. Cuando el contenido cambia, y Swing o el programador piden una actualización (repaint()). 6 3

4 Cómo se dibuja una GUI? Swing programa el diseño. Es posible que combine múltiples peticiones de rediseño que se sucedan rápidamente. Swing llama a los tres métodos siguientes en orden: paintcomponent() paintborder() paintchildren() El último pinta recursivamente los hijos de un contenedor. 7 Diseño personalizado Los componentes estándar de Swing, tales como JLabel y JComboBox, utilizan el paintcomponent() para dibujarse a sí mismos. Si desea crear un diseño personalizado, amplíe una clase contenedora, normalmente JPanel, y anule a paintcomponent (). Utilice llamadas de la API 2D en paintcomponent() para dibujar lo que desee en el fondo de JPanel. Anule getpreferredsize() o llame a setpreferredsize () para ajustar el tamaño de JPanel a su diseño. 8 4

5 La clase Graphics Se llama a paintcomponent () con el argumento Graphics g, que sirve como como herramienta de dibujo inicializada a los valores por defecto del componente. El argumento es realmente un objeto Graphics2D. Por tanto, utilícelo. Graphics era, originariamente, la clase de AWT. La API 2D arranca normalmente del modo siguiente: public void paintcomponent( Graphics g ) { super.paintcomponent( g ); Graphics2D g2 = (Graphics2D) g; // los comandos de dibujo van aquí 9 De dónde procede el argumento Graphics? El argumento Graphics del método paintcomponent() es es una captura de pantalla de los valores gráficos por defecto del componente, al igual que la fuente y el color del diseño en el momento en que se llama a los métodos de dibujo (paint). Es sólo una copia de estos valores. Cada vez que se llama a los métodos de dibujo, se obtiene una nueva versión de Graphics. Ninguno de los cambios realizados a una instancia de Graphics en una llamada a paintcomponent(), se recordará la siguiente vez que se llame al método; y ningún cambio como, por ejemplo, el realizado con setfont() se transmitirá al componente en sí. 10 5

6 Operaciones básicas de la API 2D Puede usar el argumento Graphics2D para: 1. dibujar contornos de figuras utilizando el método public void draw( Shape s ) 2. dibujar figuras con relleno utilizando el método public void fill( Shape s ) Puede usar el argumento de Graphics o Graphics2D para: 3. dibujar una imagen utilizando uno de los métodos public void drawimage(... ) 4. dibujar una cadena de texto utilizando los métodos public void drawstring(... ) 11 Contexto de representación de gráficos 2D Gran parte del poder de la API 2D proviene de la habilidad del usuario para definir los atributos del objeto Graphics2D, lo que se conoce como contexto de representación (rendering context): public void setstroke(stroke s) public void setpaint(paint p) public void setfont(font f) public void setcomposite(composite c) public void settransform(transform t) public void setrenderinghints(map m) 12 6

7 CON Plantilla de diseño personalizado import java.awt.*; // para Graphics2D, Paint, Shape, import java.awt.geom.*; // para clases Shape concretas import javax.swing.*; // para JPanel, etc public class MyPanel extends JPanel {... public void paintcomponent( Graphics g ) { super.paintcomponent( g ); Graphics2D g2 = (Graphics2D) g;... g2.setpaint/stroke/font/etc(...); Shape s = new Shape2D.Float/Double(... ); g2.draw/fill( s ); NgonApp, Primera versión JFrame con BorderLayout CENTRO NgonView amplía a JPanel JPanel con FlowLayout SUR 14 7

8 NgonApp, versión 1, 1 import javax.swing.*; import java.awt.*; import java.awt.event.*; public class NgonApp1 extends JFrame { private NgonView1 view; private JTextField nfield; public NgonApp1() { super( "NgonApp" ); setdefaultcloseoperation( EXIT_ON_CLOSE ); view = new NgonView1(); getcontentpane().add( view, BorderLayout.CENTER ); 15 NgonApp, versión 1, 2 JPanel npanel = new JPanel(); Font labelfont = new Font( "SansSerif", Font.BOLD, 18 ); JLabel nlabel = new JLabel( "Número de lados = " ); nlabel.setfont( labelfont ); npanel.add( nlabel ); nfield = new JTextField( 5 ); nfield.setfont( labelfont ); nfield.addactionlistener(new ActionListener(){...); npanel.add( nfield ); getcontentpane().add( npanel, BorderLayout.SOUTH ); pack(); 16 8

9 NgonApp, versión 1,3 el ActionListener nfield.addactionlistener( new ActionListener() { public void actionperformed( ActionEvent e ) { int nsides; String nstr = nfield.gettext(); try { nsides = Integer.parseInt( nstr ); view.setsides( nsides ); catch ( NumberFormatException n ) { view.setsides( 0 ); nfield.selectall(); // Fin de actionperformed ); // Fin de addactionlistener 17 NgonView, versión 1, 1 import javax.swing.*; import java.awt.*; import java.awt.geom.*; public class NgonView1 extends JPanel { private int nsides = 0; private Font ngonfont; static public final Dimension PREF_SIZE = new Dimension( 600, 700 ); static public final int warnx = 180; static public final int warny = 600; static public final int areax = 180; static public final int areay = 600; 18 9

10 NgonView, versión 1, 2 public NgonView1() { ngonfont = new Font("SansSerif", Font.ITALIC, 16); public void setsides ( int n ) { nsides = n; repaint(); public Dimension getpreferredsize() { return PREF_SIZE; private double getarea() { double PIn = Math.PI / nsides; return nsides * Math.cos( PIn ) * Math.sin( PIn ); 19 NgonView, versión 1, 3 Texto en el diseño public void paintcomponent( Graphics g ) { Graphics2D g2 = (Graphics2D) g; super.paintcomponent( g ); g2.setfont( ngonfont ); g2.setpaint( Color.red ); if ( nsides < 3 ) { g2.drawstring( "Elija un número de lados >= 3", warnx, warny ); else { g2.drawstring( "Área del polígono = " + getarea(), areax, areay ); 20 10

11 NgonView, versión 1 Ubicar el círculo NgonView, versión 1, 3 Dibujar el círculo g2.setstroke( new BasicStroke( 2 ) ); g2.setpaint( Color.blue ); Shape circle = new Ellipse2D.Float( 100, // superior izquierda x 100, // superior izquierda y 400, // ancho del cuadrado que lo circunscribe g2.draw( circle ); 400 ); // altura de dicho cuadrado 22 11

12 Sistema de coordenadas de Graphics2D El objeto Graphics2D utiliza un tipo de coordenadas reales (en vez de coordenadas de dispositivo) que Java denomina espacio del usuario. LLas formas y operaciones de Graphics2D están definidas como coma flotante (float o double) pero la coordenada Y aumenta hacia abajo. Algunas llamadas Graphics2D sólo admiten floats. Las coordenadas de coma flotante están diseñadas para garantizar la independencia de sus gráficos con respecto al dispositivo de salida. La API 2D está diseñada para mostrar la salida en pantalla a diferentes resoluciones. 23 La transformación por defecto de Graphics2D El proyecto de representación 2D aplica una transformación geométrica para mapear el espacio del usuario con el espacio del dispositivo. La transformación por defecto mapea unidades 1.0 de espacio de usuario con ~1/72 de pulgada, que resulta ser el tamaño medio por píxel en una pantalla o el tamaño de un punto en una impresora. De modo que a menos que haga algo especial, el diseño 2D utilizará por defecto las coordenadas en píxel

13 NgonView, versión 2 Utilizando transformación de coordenadas (-1.0,-1.0) Y 1.0 = 200 pixels 1.0 (0.0,0.0) X 25 NgonView, versión 2, Transformación de coordenadas, 1 static public final float SCALE = 200.0F; static public final float tx = 1.5F; static public final float ty = 1.5F; private float transx( float x ) { return ( x + tx ) * SCALE; private float transy( float y ) { return ( y + ty ) * SCALE; 26 13

14 NgonView, versión 2, Transformación de coordenadas, 2 public void paintcomponent( Graphics g ) {... g2.setstroke( new BasicStroke( 2 ) ); Shape circle = new Ellipse2D.Float( transx ( -1.0F ), transy( -1.0F ), 2.0F * SCALE, 2.0F * SCALE ); g2.setpaint( Color.yellow ); g2.fill( circle ); g2.setpaint( Color.blue ); g2.draw( circle ); 27 NgonView, versión 3 Cómo rellenar el polígono θ= 2 π /5 θ ( ) 0.0,0.0 ( 1.0,0.0) ( cos θ,sinθ ) 28 14

15 Construcción de formas más complejas Puede crear formas más complejas mediante la agrupación de formas y rutas (segmentos de línea, curvas cuadráticas y curvas cúbicas). El Shape combinado es un GeneralPath, que implementa la interfaz Shape para que usted pueda dibujarla o rellenarla como cualquier otra forma. Para saltar a otro punto, dejando un trozo sin dibujar, utilice: moveto( float x, float y ); Para dibujar una línea que siga una ruta, utilice: lineto( float x, float y ); 29 NgonView, versión 3, Cómo rellenar el polígono, 2 public void paintcomponent( Graphics g ) {... float dtheta = (float) ( 2 * Math.PI ) / nsides; g2.setpaint( Color.green ); GeneralPath ngon = new GeneralPath(); ngon.moveto( transx( 1.0F ), transy( 0.0F ) ); for ( int i = 1; i < nsides; i++ ) { float x = transx( (float) Math.cos( i*dtheta )); float y = transy( (float) Math.sin( i*dtheta )); ngon.lineto( x, y ); ngon.closepath(); g2.fill( ngon ); 30 15