Introduccion a graficos mediante JAVA 2D

Graficos 2D en JAVA
Maestria en Sistemas Computacionales
Tecnicas de Programacion
Catedratico: Dr. Enrique Cuan Duron
Presenta:
Fernando Alfonso Casas De la Torre

INTRODUCCION
Java 2D, al igual que todo el lenguaje Java permite la
portabilidad de programas lo que le permite a los
desarrolladores crear programas que son independientes de
la plataforma en la cual se les ejecutará. Esta característica
de Java 2D le da a las aplicaciones implementadas en este
lenguaje una flexibilidad que de otro modo no tendrían
siendo incluso independiente de sobre que tipo de
dispositivo gráfico se está trabajando.
Java 2d extiende las capacidades contenidas en el
paquete de AWT (Abstract Windowing Tool) de
Java. Sin embargo se mantiene compatible con
este heredar las características de aquel. Esto
permite que programas escritos para AWT puedan
ejecutarse con Java 2D.

INTRODUCCION
Java 2D se mantiene fiel a la lógica imperante en el
ambiente Java, por consiguiente permite a los
desarrolladores manipular los objetos creados bajo Java 2D
con la misma seguridad que todos los objetos de Java. Al
hacer que JAVA potencie sus capacidades graficas se fijaron
los siguientes objetivos…
• Mejorar la calidad gráfica de las aplicaciones
programadas en Java (el ambiente AWT no
estaba al nivel que otros ambientes gráficos).
• Satisfacer la necesidad para los programadores
de permitirles tener una sola interfaz de
programación independiente.
• Mantener una heterogeneidad entre las
distintas componentes de Java

JAVA y GRAFICOS
Uno de los principales atractivos de JAVA es su soporte para
gráficos, el cual permite a los programadores mejorar la
apariencia visual de sus aplicaciones. Ahora que se ha
difundido el uso de JAVA este posee muchas mas
herramientas para realizar dibujos mediante la API JAVA 2D.
API es una sigla que procede de la lengua inglesa y que
alude a la expresión Application Programming Interface
(cuya traducción es Interfaz de Programación de
Aplicaciones). El concepto hace referencia a los procesos, las
funciones y los métodos que brinda una determinada
biblioteca de programación a modo de capa de
abstracción para que sea empleada por otro
programa informático.

JAVA y GRAFICOS
Java 2D es un API para dibujar gráficos en dos dimensiones
usando el lenguaje de programación JAVA.
Podemos entender la API como un código que indica a las
aplicaciones cómo pueden mantener una comunicación
entre sí. Estas reglas permiten que los distintos programas
mantengan interacciones.
El API 2D de JAVA nos permite fácilmente:
• Dibujar líneas de cualquier anchura
• Rellenar formas con gradientes y texturas
• Mover, rotar, escalar y recortar texto y gráficos.
• Componer texto y gráficos solapados.

JAVA 2D
Java2D es una de las API con
el que se puede abarcar temas
muy importantes como
generar figuras geométricas,
imágenes y dibujo de texto.
A medida que se van
introduciendo nuevas clases
de la API, éstas se van
hilvanando entre sí para
proporcionar al programador
un mayor control sobre el
aspecto de los lienzos que
quiera dibujar.

JAVA y GRAFICOS
• Por ejemplo, podríamos usar el API 2D de Java para
mostrar gráficos y charts complejos que usan varios
estilos de línea y de relleno para distinguir conjuntos de
datos, como se muestra en la siguiente figura:
• El API 2D de Java también nos permite almacenar datos
de imágenes, por ejemplo, podemos realizar fácilmente
filtros de imágenes, como se muestra en la siguiente
figura:
• Pero antes veamos unos CONCEPTOS BASICOS…

CLASE GRAPHICS 2D
Dentro de la API de Java se encuentra java.awt.Graphics2D
es una clase que extiende a java.awt.Graphics y tiene
atributos de estado que conforman el contexto y que
pueden modificarse son los siguientes puntos:
• Variar la anchura del pincel o líneas.
• Definir colores o patrones de relleno para las figuras.
• Trasladar, rotar, reducir o ampliar objetos cuando son
generados.
• Especificar la forma en que se componen las figuras
superpuestas
Esta clase permite dibujar formas básicas
que se pueden integrar a los programas y contienen
métodos definidos.

AWT y SWING
En sus orígenes Java introdujo la AWT (Abstract Window
Toolkit). Ésta interfaz “creaba” los objetos delegando su
creación y comportamiento a herramientas nativas de la
plataforma donde corre la Máquina Virtual Java. Este
esquema condujo a problemas por diferencias en
distintas plataformas y S.O.
La solución fue desarrollar todos los objetos de la GUI
basados sólo en elementos muy básicos y comunes en
todas las plataformas. Así surge SWING.
NOTA: Junto a la JDK vienen demos de Java y se puede ver un demo de la
JFC en el enlace que se muestra abajo. Ver la carpeta que contiene el
ejecutable javac y podrá encontrar el directorio demo un nivel más
arriba.
http://download.java.net/javadesktop/swingset3/SwingSet3.jnlp

CONCEPTOS BASICOS
Antes de entrar a describir lo que es parte de el entorno
grafico basico de JAVA 2D veamos algunos conceptos
basicos:
• Sistema de Coordenadas
• GUI (Ventana)
• Circulo Cromatico
• Sistema de colores RGB
• Colores en JAVA
• WIDGET
• APPLET
• FRAME

SISTEMA DE COORDENADAS
Para empezar dibujar en java, primero debemos entender
su SISTEMA DE COORDENADAS el cual es un esquema para
identificar a cada uno de los posibles puntos en la pantalla.
La esquina superior izquierda de un componente de la GUI
(ventana) tiene las coordenadas (0,0). Un par de
coordenadas son valores en los ejes x-y. Las coordenadas
se utilizan para indicar en donde deben mostrarse los
gráficos en una pantalla.
Las unidades de las coordenadas se miden en pixeles el
cual es la unidad mas pequeña de resolución de un
monitor de computadoras .

GUI
La INTERFAZ GRÁFICA DE USUARIO, conocida también
como GUI (del inglés graphical user interface), es un
programa informático que actúa de interfaz de usuario,
utilizando un conjunto de imágenes y objetos gráficos para
representar la información y acciones disponibles en la
interfaz. Su principal uso, consiste en proporcionar un
entorno visual sencillo para permitir la comunicación con
el sistema operativo de una máquina o computador.
En el contexto de la interacción
persona-computadora, la interfaz
gráfica de usuario es el artefacto
tecnológico de un sistema da a través
del uso y la representación del lenguaje
visual, una interacción amigable con un
sistema informático (o ventana).

CIRCULO CROMATICO
La cantidad de pixeles en una pantalla depende del
hardware el cual le informa al sistema operativo de
que capacidades graficas puede disponer.
Cada píxel de una pantalla o monitor, sintetiza un
color graduando la luminosidad de sus 3 subpíxeles
(Rojo , Verde o Azul).
Los sistemas que emiten rayos luminosos forman las
imágenes bien a través de tubos de rayos catódicos
(TV, monitores, proyectores de vídeo, etc.), a través
de LED (diodos luminosos) o sistemas de Plasma (TV,
monitores, etc.) variando la proporción de estos
colores en los pixeles y creando la variedad cromática.

CIRCULO CROMATICO
Cada píxel de una pantalla o monitor, sintetiza un
color graduando la luminosidad de sus 3 subpíxeles.
Para indicar con qué proporción es mezclado cada
color, se asigna un valor a cada uno de los colores
primarios, de manera que el valor "0" significa que
no interviene en la mezcla y, a medida que ese valor
aumenta, se entiende que aporta más intensidad a la
mezcla. Aunque el intervalo de valores podría ser
cualquiera (valores reales entre 0 y 1, valores enteros
entre 0 y 37, etc.), es frecuente que cada color
primario se codifique con un byte (8 bits).

R G B
RGB (sigla en inglés de RED-GREEN-BLUE) es la
composición del color en términos de la intensidad
de los colores primarios de la luz. RGB es un modelo
de color basado en la síntesis aditiva, con el que es
posible representar un color mediante la mezcla por
adición de los tres colores de luz primarios.
El modelo de color RGB no define por sí mismo lo
que significa exactamente rojo, verde o azul, por lo
que los mismos valores RGB pueden mostrar colores
notablemente diferentes en distintos dispositivos que
usen este modelo de color.

TABLA DE COLORES RGB
Los colores primarios son el
rojo, el verde y el azul. Java
usa el método RGB, que
significa que cualquier color se
puede describir dando las
cantidades de rojo (Red),
verde (Green), y azul (Blue).
Estas cantidades son números
enteros comprendidos entre 0
y 255, o bien, números reales
comprendidos entre 0.0 y 1.0.
La siguiente tabla nos
proporciona los colores más
comunes y sus valores RGB.

WIDGET
En informática, un widget (o artilugio) es una pequeña
aplicación o programa, usualmente presentado en archivos
o ficheros pequeños que son ejecutados por un Motor de
Widgets o( Widget Engine). Entre sus objetivos están dar
fácil acceso a funciones frecuentemente usadas y proveer
de información visual.
En el contexto de la programación de aplicaciones visuales
tienen un significado más amplio como componente o
control visual que el programador reutiliza. Suelen reunirse
varios widgets en juegos de herramientas de widgets. Se
usan para construir interfaces gráficas de usuario (GUI).
Un widget en escencia es una interfaz grafica
responsable de interactuar con el usuario

WIDGET
Con ese nombre tambien designamos unas pequeñas
aplicaciones que pueden funcionar en el escritorio del
ordenador, en el navegador o en ambos, dependiendo de
la plataforma sobre la que funcione.
Los Widget son pedazos de código que
representan funcionalidades o
contenidos y que pueden ser
instalados y ejecutados en el
programa o nuestra página web de
una forma muy sencilla. El objetivo de
este tipo de aplicación es enriquecer
los contenidos y funcionalidades de la
interfaz grafica sin necesidad de
programar y crear nuevos contenidos.

OBJETOS GRAFICOS EN JAVA
Todos los objetos gráficos en una aplicación Java forman una jerarquía. La
mayor jerarquía está en un JFrame, un JDialog, o un JApplet.
Ahora veremos la estructura de los JFrame. Ejemplo:

OBJETOS GRAFICOS EN JAVA
El RootPane viene con el JFrame. También lo traen los JInternalFrame y los
otros contenedores de ventanas superiores (autónomas): JDialog, JApplet,
JFrame.
El root pane tiene 4 partes: vidrio, panel de capas, panel de contenido, y
una barra de menú opcional.

METODOS Y OBJETOS
Asociado a cada objeto gráfico debemos distinguir su modelo de su vista.
• El MODELO es el conjunto de atributos de un objeto, corresponde a la
representación en memoria de un objeto. Por ejemplo, para un
termómetro, basta el atributo double temperatura.
• La VISTA es la apariencia visual que decidimos dar al objeto. Por
ejemplo, un termómetro puede ser digital, columna de mercurio, la
intensidad de un color, etc.
• Así una cosa es el cambio del estado de un objeto y otra el cambio en la
vista correspondiente a ese nuevo estado.
• Los Objetos Swing mantienen esa consistencia, pero debemos
ocuparnos de ello en objetos gráficos nuestros.

Clase GRAPHICS y sus metodos
JAVA proporciona la clase Graphics, que permite dibujar elipses, cuadrados,
líneas, mostrar texto y también tiene muchos otros métodos de dibujo.
Para cualquier programador, es esencial el entendimiento de la clase
Graphics, antes de adentrarse en el dibujo en Java.
La clase Graphics proporciona el entorno de trabajo para cualquier
operación gráfica que se realice dentro del AWT.
Para poder pintar, un programa necesita un contexto gráfico
válido, representado por una instancia de la clase Graphics.
Pero esta clase no se puede instanciar directamente; así que
debemos crear un componente y pasarlo al programa como un
argumento al método paint().

El único argumento del método paint() es un objeto de esta clase. La clase
Graphics dispone de métodos para soportar tres categorías de operaciones
gráficas:
1) Dibujo de primitivas gráficas,
2) Dibujo de texto,
3) Presentación de imágenes en formatos *.gif y *.jpeg.
Además, la clase Graphics mantiene un contexto gráfico: un área de dibujo
actual, un color de dibujo del Background y otro del Foreground, un Font
con todas sus propiedades, etc. Los ejes están situados en la
esquina superior izquierda. Las coordenadas se miden en pixels.

Algunas de las formas primitivas o básicas que provee Graphics son
rectangulos, elipses, circulos, líneas, etc.

SWING
Es una biblioteca grafica para JAVA. El paquete Swing es
parte de la JFC (Java Foundation Classes) en la
plataforma Java. La JFC provee facilidades para ayudar a
los programadores a construir GUIs. Swing abarca
componentes como botones, tablas, marcos, etc.
Incluye WIDGETS para la interfaz
grafica del usuario tales como
cajas de texto, botones,
desplegables y tablas. Antes de la
existencia de Swing, las interfaces
gráficas con el usuario se
realizaban a través de AWT
(Abstract Window Toolkit), de
quien Swing hereda todo el
manejo de eventos.

SWING (cont.)
Usualmente, para toda componente AWT existe una
componente Swing que la reemplaza, p.ej: clase Button
de AWT es reemplazada por clase JButton de Swing.
Las componentes Swing se identifican porque
pertenecen al paquete javax.swing y el nombre de
todas las componentes Swing comienza con «J».
Las componentes de Swing utilizan la infraestructura de
AWT, incluyendo el modelo de eventos AWT, el cual rige
cómo una componente que reacciona a eventos tales
como, eventos de teclado, mouse, etc... Es por esto, que
la mayoría de los programas Swing necesitan importar
dos paquetes AWT: java.awt.* y java.awt.event.*.
Ojo: Como regla, los programas no deben usar componentes
pesados de AWT junto a componentes Swing, ya que los
componentes de AWT son siempre pintados sobre los de Swing. (Por
componentes pesadas de AWT se entiende Menú, ScrollPane y todas
las componentes que heredan de las clases Canvas y Panel de AWT).

Ejemplo de Aplicacion SWING
Una aplicación SWING Se
construye mezclando
componentes con las siguientes
reglas.
• Debe existir, al menos, un
contenedor de alto nivel (Top-
Level Container), que provee el
soporte que las componentes
Swing necesitan para el pintado y
el manejo de eventos.
• Otras componentes colgando del
contenedor de alto nivel (éstas
pueden ser contenedores o
componentes simples).

En las primeras líneas se importan los paquetes necesarios (import). Luego se
declara la clase HolaMundoSwing y en el método main se configura el top level
container:
public class HolaMundoSwing {
public static void main(String[] args) {
JFrame frame = new JFrame("HolaMundoSwing");
...
frame.pack();
frame.setVisible(true);
}
}
En el ejemplo, sólo hay un contenedor de alto nivel, un JFrame. Un frame
implementado como una instancia de la clase JFrame es una ventana con
decoraciones, tales como, borde, título y botones como íconos y para cerrar la
ventana. Aplicaciones con un GUI típicamente usan, al menos, un frame.

Además, el ejemplo tiene un componente, una etiqueta que dice "Hola Mundo".
final JLabel label = new JLabel("Hola Mundo"); //construye el JLabel.
frame.getContentPane().add(label); //agrega el label al frame.
Para que el botón de cerrar cierre la ventana, hay dos opciones:
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //JDK 1.3+
frame.addWindowListener(new java.awt.event.WindowAdapter(){ //versiones
anteriores
public void windowClosing(WindowEvent e){
System.exit(0);
}
}
);

Creando una aplicacion
En primer lugar invocamos las librerías que usaremos…
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
public class Grafico1 extends JFrame {

Creando una aplicacion
Sobrescribimos el método paint heredado de la clase JFrame:
public void paint (Graphics g)
{
El método paint se ejecuta cada vez que el JFrame debe ser redibujado y llega
como parámetro un objeto de la clase Graphics. Este objeto nos permite acceder
al fondo del JFrame y utilizando las primitivas gráficas dibujar líneas, rectángulos,
elipses etc.
Lo primero que hacemos dentro de este método es llamar al método paint de la
clase superior para que se pinte el fondo del JFrame y otras componentes
contenidas dentro (para llamar al método paint de la clase JFrame debemos
anteceder la palabra clave super y pasar el parámetro respectivo):
super.paint(g);

Asignacion de colores en JAVA
Para crear un objeto de la clase Color, se
pasan tres números a su constructor que
indican la cantidad de rojo, verde y azul.
Color colorRosa=new Color(255, 175, 175);
Mediante la función setColor,
cambiamos color con el que dibujamos
una línea, un texto o rellenamos una
figura cerrada en el contexto gráfico g.
g.setColor(colorRosa);

Asignacion de colores en JAVA
No es necesario tener a mano la tabla de las componentes RGB
de cada color. La clase Color nos proporciona un conjunto de
colores predefinidos en forma de miembros estáticos de dicha
clase. Podemos escribir alternativamente
g.setColor(Color.pink);
Los colores predefinidos son los siguientes:
Color.white Color.black Color.yellow
Color.lightGray Color.red Color.green
Color.gray Color.pink Color.magenta
Color.darkGray Color.orange Color.cyan
Color.blue

Dibujo de Formas Primitivas
Mediante el método setColor activamos un color:
g.setColor (Color.blue);
Dibuja una línea desde la coordenada inicial hasta la final. La
línea es del color ultimo que se definió:
g.drawLine (xini, yini, xfin, yfin);
Dibuja un rectángulo desde la coordenada inicial con el ancho
y alto en pixeles que se defina
g.drawRect (xini, yini, ancho, alto);

Dibuja un rectangulo igual que DrawRect con el agregado de
que lo rellena del color que se especifique en la ultima línea
de color:
g.fillRect (xini, yini, ancho, alto);
Dibuja un rectángulo desde la coordenada inicial con el ancho
y alto en pixeles que se defina pero dandole un efecto de
realce (3D) con un pequeño borde.
g.fill3DRect (xini, yini, ancho, alto, true/false);
Similar a drawRect más un valor de redondeo de los vértices
que le indicamos en el quinto y sexto parámetro (arcos)
pudiendo ser el rectangulo en contorno o relleno:
g.drawRoundRect ( x, y, alto, ancho, arco1, arco2);
g.fillRoundRect (x, y, alto, ancho, arco1, arco2);

Mediante el método drawString posiciona en una coordenada
un dato tipo cadena con el ultimo Font y Color especificado:
drawString(String str, int x, int y);
Dibuja un óvalo con una razón de ancho y alto (elipse) ya sea
en contorno o con relleno definido por el ultimo color:
g.drawOval ( x, y, alto, ancho);
g.fillOval (350, 270, 50, 70);
Dibuja un arco con una razón de ancho y alto (elipse) pero
solo una parte de ella según se defina:
g.drawArc ( x, y, alto, ancho, inicio, fin);

Dibujamos un polígono, en este caso un triangulo (debemos
indicar mediante dos vectores los vértices de cada punto del
triángulo), el primer punto es el (500,70) el segundo punto es
el (550,120) y por último el punto (450,120):
int [] vx1 = {500, 550, 450};
int [] vy1 = {70, 120, 120};
g.drawPolygon (vx1, vy1, 3);
De forma similar los métodos fillRect, fillRoundRect, fillOval y
fillPolygon son similares a los anteriores con la diferencia que
pinta su interior con el color activo de la última llamada al
método setColor:
int [] vx2 = {500, 550, 450};
int [] vy2 = {270, 320, 320};
g.fillPolygon (vx2, vy2, 3);

Interfaz de usuario HMI
Una finalidad importante de JAVA es dar soporte a
aplicaciones e interfaces graficas.
La sigla HMI es la abreviación en Ingles de Interfaz Hombre
Maquina. La interfaz de usuario es el medio con que el
usuario puede comunicarse con una máquina, un equipo o
una computadora, y comprende todos los puntos de
contacto entre el usuario y el equipo. Normalmente suelen
ser fáciles de entender y fáciles de accionar.
Las interfaces básicas de usuario son aquellas que incluyen
elementos como menús, ventanas, teclado, ratón, los beeps
y algunos otros sonidos que la computadora hace, y en
general, todos aquellos canales por los cuales se permite la
comunicación entre el ser humano y la computadora.

Interfaz de usuario HMI
Funciones principales de una HMI…
Sus principales funciones son las siguientes:
• Puesta en marcha y apagado.
• Control de las funciones manipulables del equipo.
• Manipulación de archivos y directorios.
• Herramientas de desarrollo de aplicaciones.
• Comunicación con otros sistemas.
• Información de estado.
• Configuración de la propia interfaz y entorno.
• Intercambio de datos entre aplicaciones.
• Control de acceso.
• Sistema de ayuda interactivo.

BIBLIOGRAFIA Y REFERENCIAS
• Programación de Interfaces Gráficas en Java
Agustín J. González
• Como programar en Java. Ed. 7.
Paul Dietel

MUCHAS GRACIAS
POR SU ATENCION
Presento:
Fernando Alfonso Casas De la Torre

Introduccion a graficos mediante JAVA 2D

Más contenido relacionado

La actualidad más candente (20)

Similar a Introduccion a graficos mediante JAVA 2D (20)

Más de Fernando Alfonso Casas De la Torre (20)

Último (6)

Introduccion a graficos mediante JAVA 2D