Notas
Presentación
Esquema
1
Fundamentos de graficación
  • Graficación en Java
2
¿Qué es un gráfico?
  • En su forma más simple un gráfico puede ser visto como una representación de puntos o “píxeles” agrupados de manera que permitan percibir visualmente alguna superficie, dibujo o forma.
  • La pantalla de un computador puede ser vista como una matriz de píxeles.
3
¿Cómo se pueden crear programas gráficos?
  • Hay que tener claro que no todas las pantallas permiten llevar a cabo dibujos sobre ellas.
  • Existen algunos tipos de terminales que solo permiten desplegar caracteres de texto.
  • Algunos ejemplos de interfaces de texto son las pantallas de comandos de algunos sistemas operativos.
4
¿Cómo se pueden crear programas gráficos? (continuación)
  • Para graficar se necesita contar con un sistema operativo con soporte gráfico y el hardware apropiado.
  • La cantidad de píxeles por pulgada en una pantalla y la variedad de colores pueden variar de un computador a otro y de un sistema operativo a otro.
  • Dadas las condiciones anteriores se puede graficar si el lenguaje de programación cuenta con instrucciones o primitivas de graficación.
5
¿En que se diferencia una ventana gráfica vs. una ventana para despliegue de texto?
  • En la ventana de texto el tipo de letra y “font” es el mismo para toda la ventana.
  • El despliegue de texto es a nivel de línea y no a nivel de píxel.
  • El control del despliegue se lleva a cabo enviando caracteres  a pantalla , incluyendo caracteres especiales como tabuladores cambios de línea, retornos y otros.
  • No permite la presentación de dibujos y texto juntos.
6
¿Cuáles clases de Java son importantes para manejar gráficos?
  • Las clases más importantes de java para graficación pertenecen a las bibliotecas de “awt” o Abstract Windowing Toolkit y a las clases de manejo de componentes SWING incluyendo:
  • javax.swing.JFrame; // Creación de ventana
  • java.awt.Graphics; // Primitivas de graficación
  • java.awt.Color; // Manejo de colores
  • java.awt.Font; // Manejo de tipos de letra
  • Existe también el Java 3D para manejo de gráficos tridimensionales.
7
¿Cómo crear una ventana gráfica en Java?
  • La clase JFrame permite crear ventanas utilizando el paquete javax.swing.
  • Para crear una ventana basta con crear una instancia de la misma, asignarle un tamaño inicial y ejecutar el método “show” para visualizarla.
8
Visualización de una ventana gráfica en Java
9
EJEMPLO 1 – Creación de una ventana en Java
  • Ir al ejemplo
10
EJERCICIO 1 – Creación de una ventana en Java
  • Ir al ejercicio
11
Nota importante
  • A diferencia del JOptionPane que “bloquea” o se queda esperando a que el usuario ejecute alguna opción, al mostrar ventanas el programa continúa con la siguiente instrucción inmediatamente.
  • Note que el código del Ejemplo 1 no termina con la instrucción System.exit(0), ya que si el programa principal finaliza y sale, las ventanas desaparecerían.
  • Si se crean varias ventanas se pueden mostrar todas a la vez y mostrarlas o cerrarlas cuantas veces se desee.
  • Siempre es posible definir ventanas de manera que si esta se cierra el programa termina por lo que todas las demás ventanas se cerrarán también.
12
¿Cómo finalizar el programa al presionar el botón de cierre?
  • Por omisión cuando se presiona el botón de cerrar en una ventana esta solamente deja de ser visible pero sigue activa en memoria.
  • Si se desea que la aplicación finalice al cerrar la ventana, hay que cambiar el comportamiento por omisión asociado al botón.
  • Se puede indicar que se desea que el programa “salga al cerrar” de la siguiente forma:
  • ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
13
¿Cómo crear varias ventanas a la vez? Ejemplo (continuación)
14
EJEMPLO 2 – Creación de múltiples ventanas
  • Ir al ejemplo
15
EJERCICIO 2 – Creación de múltiples ventanas
  • Ir al ejercicio
16
¿Cómo puedo dibujar gráficos en Java?
  • En los JFrame el método que dibuja se llama: paint()
  • Una manera de dibujar es crear una nueva clase para ventanas, con instrucciones específicas dentro del método paint().
  • La programación por objetos ofrece un mecanismo llamado Herencia que permite “heredar” todos los atributos y métodos de una clase preexistente y extenderla o sobrecargar alguno de sus métodos.
  • Para dibujar basta con crear una nueva clase que “extienda” o “herede” toda la funcionalidad de un JFrame pero que tenga sobrecargado el método paint()
  • La Herencia es tratada en profundidad en el siguiente curso.
17
Visualización de uso de gráficos en Java
18
EJEMPLO 3 – Creación de un gráfico dentro de una ventana
  • Ir al ejemplo
19
EJERCICIO 3 – Creación de un gráfico dentro de una ventana
  • Ir al ejercicio
20
¿Cómo funcionan las coordenadas de una ventana gráfica?
  • La ventana puede ser vista como una matriz compuesta por “píxeles” de colores.
  • Las dimensiones normalmente se expresan en “pixeles” (ancho,alto)
21
¿Cómo puedo utilizar diferentes colores?
  • La información del contexto gráfico se almacena en un objeto de la clase Graphics.
  • Al dibujar texto o formas dentro del objeto Graphics, se utiliza el color asociado al contexto.
  • El método para asociar un Color dentro del contexto gráfico Graphics es el siguiente:
  • public void setColor(Color color)
22
¿Cómo se pueden crear Colores?
  • Se pueden crear colores usando cualquiera de los dos constructores:
    • Color (int rojo, int verde, int azul)
    • Color (float rojo, float verde, float azul)
  • Los tres parámetros representan los tres componentes básicos del color (rojo, verde, azul). Son enteros de 0 a 255 o flotantes de 0.0f a 1.0f.
  • Además existen colores constantes estáticos previamente definidos dentro de la clase Color.
23
¿Cuales son algunos colores predefinidos?
  • Instancia Valores (RGB) Color
  • Color.black ( 0 , 0 , 0 ) negro
  • Color.white (255,255,255) blanco
  • Color.gray (128,128,128) gris
  • Color.red (255, 0 , 0 ) rojo
  • Color.green ( 0 ,255, 0 ) verde
  • Color.blue ( 0 , 0 ,255) azul
  • Color.cyan ( 0 ,255,255) cyan
  • Color.magenta (255, 0 ,255) magenta
  • Color.yellow (255,255, 0 ) amarillo
  • Color.orange (255,200, 0 ) anaranjado
  • Color.pink (255,175,175) rosado
24
¿Cómo puedo dibujar una línea en java?
  • Para dibujar una línea se utiliza el método drawLine que recibe las coordenadas del punto de origen (x1, y1) y el punto final (x2,y2)
  • De la siguiente forma:
  • public void drawLine(int x1,int y1,int x2,
  • int y2)
25
Utilización de líneas en Java
26
EJEMPLO 4 – Graficación de líneas de distintos colores
  • Ir al ejemplo
27
EJERCICIO 4 – Graficación de líneas de distintos colores
  • Ir al ejercicio
28
¿Cómo puedo dibujar un óvalo en Java?
  • Los óvalos incluyendo los círculos se especifican definiendo un rectángulo dentro del cual se “circunscriben”.
  • Por lo tanto los parámetros son la esquina superior izquierda del rectángulo (x,y) dentro del cual se encierra el óvalo y el ancho y alto.
  • Si se desea un óvalo relleno (“filled”) se puede utilizar el método fillOval() de forma similar al drawOval() que simplemente dibuja el borde.
29
¿Qué significan los parámetros del drawOval y del fillOval en Java?
30
Visualización del uso de óvalos en Java
31
EJEMPLO 5  – Graficación de un óvalo
  • Ir al ejemplo
32
EJERCICIO 5  – Graficación de un óvalo
  • Ir al ejercicio
33
¿Cómo puedo dibujar un rectángulo en Java?
  • El rectángulo se define mediante el método drawRect() que recibe como parámetros la esquina superior izquierda, el ancho y el alto del rectángulo.
  • Si se desea relleno y no solo el borde se puede utilizar el método fillRect()
  • Si se desea limpiar un área rectangular utilizando el color del fondo se puede utilizar el método clearRect()


    • public void drawRect(int x, int y, int ancho, int alto)


    • public void fillRect(int x, int y, int ancho, int alto)


    • public void clearRect(int x, int y, int ancho, int alto)

34
Visualización del uso de rectángulos en Java
35
EJEMPLO 6  – Graficación de un rectángulo
  • Ir al ejemplo
36
EJERCICIO 6  – Graficación de un rectángulo
  • Ir al ejercicio
37
¿Cómo puedo dibujar un polígono en Java?
  • La clase Graphics cuenta con los siguientes métodos:
    • public void drawPolygon(int xPoints[], int
    • yPoints[], int points)
    • public void drawPolygon(Polygon p)
    • public void fillPolygon(int xPoints[], int
    • yPoints[], int points)
    • public void fillPolygon(Polygon p)
38
Visualización del uso de polígonos en Java
39
EJEMPLO 7  – Graficación de  polígonos
  • Ir al ejemplo
40
EJERCICIO 7  – Graficación de  polígonos
  • Ir al ejercicio
41
¿Cómo puedo dibujar un arco en java?
  • El arco consiste en un fragmento de un óvalo, con un ángulo de inicio y una amplitud de arco.
    • public void drawArc(int x, int y, int ancho,
    • int alto, int anguloInicial,
    • int anguloDelArco)


    • public void fillArc(int x, int y, int ancho,
    • int alto, int anguloInicial,
    • int anguloDelArco)
42
Visualización del uso de arcos en Java
43
EJEMPLO 8  – Graficación de  arcos
  • Ir al ejemplo
44
EJERCICIO 8  – Graficación de  arcos
  • Ir al ejercicio
45
¿Cómo puedo dibujar texto en java?
  • Un contexto gráfico tiene también asociado un “font” o fuente de texto.
  • Para dibujar texto se utiliza el método:
      • drawString(String, int, int)
    • // Clase Graphics.
  • Los parámetros corresponden al texto y coordenadas de la esquina inferior izquierda del texto, o inicio del renglón sobre el que se escribe.
46
¿Cómo puedo crear un tipo de letra nuevo o  “Font”?
  • La clase Font permite manipular el tipo, el estilo y el tamaño de la letra.
  • El tipo se refiere al String que describe el nombre de la fuente. Por ejemplo: “Serif”, “Monospaced”, “SansSerif”.
  • El estilo puede ser:
    • Font.BOLD, (negrita).
    • Font.PLAIN, (normal).
    • Font.ITALIC, (cursiva).
  • El tamaño de la letra es medido en pixeles.
47
¿Cómo puedo crear un tipo de letra nuevo o  “Font”? (continuación)
  • Ejemplos de instancias de tipo Font:
    • Font(“Serif”, Font.BOLD, 12);
    • Font(“Monospaced”,
    • Font.ITALIC + Font.BOLD, 24);
    • Font(“SansSerif”, Font.PLAIN, 14);
  • Los métodos para  de Graphics para asignar un nuevo Font es el siguiente:
    • public void setFont(Font fuente);
48
Visualización del uso de texto en Java
49
EJEMPLO 9  – Graficación de texto
  • Ir al ejemplo
50
EJERCICIO 9  – Graficación de texto
  • Ir al ejercicio
51
EJEMPLO 10  – Utilización de graficación para resolución de problemas
  • Ir al ejemplo
52
EJERCICIO 10  – Utilización de graficación para resolución de problemas
  • Ir al ejercicio