[Java] Graficos con Swing Parte 1.

Inicialmente, empezamos a desarrollar utilizando solo la 'consola', con el tipico 'hola mundo', y de esta forma realizamos pequeñas aplicaciones destinadas a la lectura o escritura de archivos, calculos matematicos, etc. Conforme vamos aprendiendo más, nos damos cuenta que tenemos muchos mas recursos de donde tomar.

Es verdad que algunos se 'saltan' el desarrollo de aplicaciones para escritorio o el desarrollo de algún applet y se pasan directo al desarrollo web, donde no ven nada de componentes graficos como tales, propios de Java (botones, etiquetas, paneles, etc.). Java permite, además de sus controles, realizar dibujos directamente en una 'Ventana' o algún Panel. Para con ésto realizar aplicaciones especializadas para mostrar Graficos, crear animaciones o desarrollar juegos. En esta entrada veremos el componente principal de una Aplicacion de escritorio y como dibujar y mostrar elementos gráficos directamente en el (o con ayuda de algun otro componente contenido en la ventana).
Tomar en cuenta que el objetivo de esto no es especializarse en Swing o la clase Graphics, ya que No se explica a detalle.

Pasemos al planteamiento: Se ha de desarollar una pequeña aplicacion que permita visualizar formas basicas en una ventana.

Para esto, como elemento principal necesitamos crear un Contenedor, el cual permitirá mostrar el contenido que necesitemos, para esto utilizaremos el componente llamado JFrame.

Aunque se puede dibujar directamente en un JFrame, utilizaremos un JPanel para este trabajo.

Ambos componentes tienen un método llamado paint(Graphics g), que es el encargado del renderizado de dicho componente. La estructura basica de nuestra clase sería la siguiente:

import java.awt.Color;
import java.awt.Graphics;

import javax.swing.*;

public class PanelGrafico extends JPanel {
  
   public PanelGrafico() {    }
  
   public void paint(Graphics g) {
       g.drawRect(20, 20, 200, 200);
   }
  
   public static void main(String[] args) {
      
       PanelGrafico2 panel = new PanelGrafico2();
       JFrame ventana = new JFrame();
       ventana.add(panel);
       ventana.setSize(400,400);
       ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       ventana.setVisible(true);
   }
  
}

Ejecutando el codigo anterior obtenemos lo siguiente:

Nos enfocaremos principalmente en el método paint(). Éste método es el encargado de dibujar en el componente, lleva como parámetro el objeto Graphics, que es el que nos proporciona los elementos graficos que pueden ser dibujados, incluyendo metodos para formas basicas como lineas o circulos, así como también texto. Algunos métodos son los siguientes:

g.drawLine(x1, y1, x2, y2);
g.drawRect(x, y, ancho, alto);
g.drawOval(x, y, ancho, alto);
g.drawString("texto", x, y);

Las variables x, y representan las coordenadas (numero entero) en "pixeles" dentro del contenedor. Las variables ancho y alto también son valores enteros.

Como practica no hace falta mas que experimentar con dichos métodos (así como los demás pertenecientes a la clase Graphics). Podemos agregar este codigo al método paint(), el cual dibujará una fila de pequeños circulos a lo ancho de la ventana:

for(int cont=0; cont<this.getWidth()/10; cont++) {
g.fillOval(cont*10, 10, 10, 10);
}

Lo siguiente dibujará una 'rejilla' a lo ancho y largo de la ventana:

for(int cont=0; cont<getWidth()/20; cont++) {
g.drawLine(cont*20, 0, cont*20, this.getHeight());
g.drawLine(0, cont*20, this.getWidth(),cont*20);
}

Puede agregarce color a las formas, utilizando el siguiente codigo:

g.setColor(Color.blue);

Agregando los ultimos fragmentos de codigo al metodo paint() y ejecutandolo, se obtiene lo siguiente:

Practicar y experimentar es la mejor manera de entender mejor la clase Graphics.

Un ejemplo:

Pero para realizar animaciones, o algun pequeño juego, o cualquier elemento que se 'moverá' dentro de la ventana, lo anterior no es suficiente (o no es recomendado), ya que al momento de refrescar la pantalla ciclicamente, se nota un efecto de 'parpadeo' y por lo cual, no es posible visualizar comodamente los elementos.

Para solucion a este problema hay una tecnica conocida como Doble Buffer, la cual se describirá en la Parte 2 de éste tutorial.

Saludos!