Dibujando en 2D con Swing en Java

Introducción

Java proporciona una potente herramienta para crear interfaces gráficas y dibujos 2D a través de la biblioteca Swing y la clase Graphics. En este documento aprenderemos los conceptos básicos para realizar dibujos estáticos en una ventana con Java 1.8, una base importante antes de pasar a animaciones y juegos interactivos.

1. Creación de una Ventana con JFrame

Para dibujar en Java con Swing, primero necesitamos una ventana donde mostrar nuestros dibujos. Usaremos JFrame, una clase que representa una ventana en Swing.

Ejemplo básico de una ventana vacía:

import javax.swing.*;

public class VentanaDibujo {
    public static void main(String[] args) {
        JFrame ventana = new JFrame("Mi primera ventana");
        ventana.setSize(800, 600); // Tamaño de la ventana
        ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        ventana.setVisible(true); // Mostrar ventana
    }
}

2. Creación de un Panel para Dibujar

Swing no dibuja directamente en la ventana (JFrame). En su lugar, creamos una clase que extienda JPanel y sobreescribimos el método paintComponent(Graphics g), donde g es el objeto que nos permite dibujar.

Ejemplo de un panel con dibujo:

import javax.swing.*;
import java.awt.*;

class Lienzo extends JPanel {
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g); // Limpia el panel antes de dibujar
        
        // Dibujar un rectángulo rojo
        g.setColor(Color.RED);
        g.fillRect(50, 50, 200, 100);
    }
}

public class VentanaDibujo {
    public static void main(String[] args) {
        JFrame ventana = new JFrame("Dibujo en Swing");
        ventana.setSize(800, 600);
        ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        Lienzo lienzo = new Lienzo(); // Crear el panel de dibujo
        ventana.add(lienzo); // Agregarlo a la ventana
        
        ventana.setVisible(true);
    }
}

3. Dibujar Formas Básicas

Podemos usar Graphics para dibujar diversas figuras geométricas:

Método	Descripción
`g.drawLine(x1, y1, x2, y2)`	Dibuja una línea
`g.drawRect(x, y, ancho, alto)`	Dibuja un rectángulo
`g.fillRect(x, y, ancho, alto)`	Dibuja un rectángulo relleno
`g.drawOval(x, y, ancho, alto)`	Dibuja un óvalo
`g.fillOval(x, y, ancho, alto)`	Dibuja un óvalo relleno
`g.drawArc(x, y, ancho, alto, inicio, arco)`	Dibuja un arco
`g.fillArc(x, y, ancho, alto, inicio, arco)`	Dibuja un arco relleno

Ejemplo con varias formas:

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    
    g.setColor(Color.BLUE);
    g.fillOval(100, 100, 150, 150); // Círculo azul
    
    g.setColor(Color.GREEN);
    g.drawLine(50, 300, 300, 400); // Línea verde
    
    g.setColor(Color.ORANGE);
    g.drawArc(400, 100, 100, 100, 0, 180); // Arco naranja
}

4. Agregar Texto a la Pantalla

Si queremos mostrar texto en nuestra ventana, usamos g.drawString().

Ejemplo de texto en un panel:

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    
    g.setColor(Color.BLACK);
    g.setFont(new Font("Arial", Font.BOLD, 20));
    g.drawString("Hola, Swing!", 50, 50);
}

5. Uso de Colores Personalizados

Java nos permite definir nuestros propios colores con new Color(r, g, b) donde r, g y b están entre 0 y 255.

Ejemplo con un color personalizado:

g.setColor(new Color(128, 0, 128)); // Color morado personalizado
g.fillRect(200, 200, 100, 50);

6. La librería Graphics2d

Graphics2D es una clase más avanzada que Graphics y proporciona un control más preciso sobre la geometría, la transformación, el color y la gestión de texto. Algunas de las ventajas de usar Graphics2D incluyen:

Transformaciones: Permite rotar, escalar, trasladar y sesgar gráficos.
Mejor calidad de renderizado: Ofrece opciones para suavizado y renderizado de alta calidad.
Formas complejas: Facilita la creación y manipulación de formas geométricas complejas.
Estilos de trazo: Permite definir estilos de trazo personalizados, como líneas discontinuas.
Compatibilidad con fillPolygon: A diferencia de Graphics, Graphics2D soporta métodos avanzados como fillPolygon.

El método fillPolygon se utiliza para dibujar y rellenar un polígono con un color específico. La sintaxis básica es la siguiente:

void fillPolygon(int[] xPoints, int[] yPoints, int nPoints)

Donde:

xPoints: Es un array de enteros que contiene las coordenadas X de los vértices del polígono.
yPoints: Es un array de enteros que contiene las coordenadas Y de los vértices del polígono.
nPoints: Es el número de puntos (vértices) del polígono.

Vamos a ver un ejemplo sencillo donde dibujamos y rellenamos un triángulo:

import javax.swing.*;
import java.awt.*;

public class SimplePolygon extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;

        // Coordenadas X de los vértices del triángulo
        int[] xPoints = {50, 100, 150};
        // Coordenadas Y de los vértices del triángulo
        int[] yPoints = {150, 50, 150};
        // Número de vértices
        int nPoints = 3;

        // Establecer el color de relleno
        g2d.setColor(Color.RED);
        // Dibujar y rellenar el triángulo
        g2d.fillPolygon(xPoints, yPoints, nPoints);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("Simple Polygon");
        SimplePolygon panel = new SimplePolygon();
        frame.add(panel);
        frame.setSize(300, 300);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

Observa como puedes crear diferentes formas geométricas, simplemente variando la cantidad de puntos a usar.

import javax.swing.*;
import java.awt.*;

public class FigurasColores extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g; // Convertir Graphics a Graphics2D para usar métodos avanzados

        // Dibujar un triángulo rojo
        g2d.setColor(Color.RED); // Establecer el color de dibujo a rojo
        int[] x1 = {50, 100, 150}; // Coordenadas X de los vértices del triángulo
        int[] y1 = {150, 50, 150}; // Coordenadas Y de los vértices del triángulo
        g2d.drawPolygon(x1, y1, 3); // Dibujar el contorno del triángulo
        g2d.fillPolygon(x1, y1, 3); // Rellenar el triángulo con el color establecido

        // Dibujar un cuadrado azul
        g2d.setColor(Color.BLUE); // Establecer el color de dibujo a azul
        int[] x2 = {200, 250, 250, 200}; // Coordenadas X de los vértices del cuadrado
        int[] y2 = {50, 50, 100, 100}; // Coordenadas Y de los vértices del cuadrado
        g2d.drawPolygon(x2, y2, 4); // Dibujar el contorno del cuadrado
        g2d.fillPolygon(x2, y2, 4); // Rellenar el cuadrado con el color establecido

        // Dibujar un pentágono verde
        g2d.setColor(Color.GREEN); // Establecer el color de dibujo a verde
        int[] x3 = {300, 350, 375, 325, 275}; // Coordenadas X de los vértices del pentágono
        int[] y3 = {150, 150, 200, 250, 200}; // Coordenadas Y de los vértices del pentágono
        g2d.drawPolygon(x3, y3, 5); // Dibujar el contorno del pentágono
        g2d.fillPolygon(x3, y3, 5); // Rellenar el pentágono con el color establecido

        // Dibujar un hexágono amarillo
        g2d.setColor(Color.YELLOW); // Establecer el color de dibujo a amarillo
        int[] x4 = {400, 450, 475, 450, 400, 375}; // Coordenadas X de los vértices del hexágono
        int[] y4 = {50, 50, 100, 150, 150, 100}; // Coordenadas Y de los vértices del hexágono
        g2d.drawPolygon(x4, y4, 6); // Dibujar el contorno del hexágono
        g2d.fillPolygon(x4, y4, 6); // Rellenar el hexágono con el color establecido
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("Figuras de Colores"); // Crear una ventana
        FigurasColores panel = new FigurasColores(); // Crear una instancia del panel personalizado
        frame.add(panel); // Añadir el panel a la ventana
        frame.setSize(600, 400); // Establecer el tamaño de la ventana
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Configurar la operación de cierre
        frame.setVisible(true); // Hacer visible la ventana
    }
}

7. Un monete de ejemplo

Para finalizar, un dibujo divertido de un mono muy mono.

import javax.swing.*;
import java.awt.*;

public class MinecraftMonkey extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;

        // Dibujar la cabeza
        g2d.setColor(new Color(139, 69, 19)); // Color marrón
        g2d.fillRect(50, 50, 100, 100);

        // Dibujar los ojos
        g2d.setColor(Color.WHITE);
        g2d.fillRect(70, 70, 20, 20);
        g2d.fillRect(110, 70, 20, 20);

        g2d.setColor(Color.BLACK);
        g2d.fillRect(75, 75, 10, 10);
        g2d.fillRect(115, 75, 10, 10);

        // Dibujar la boca
        g2d.setColor(Color.BLACK);
        g2d.fillRect(90, 120, 20, 10);

        // Dibujar el cuerpo
        g2d.setColor(new Color(139, 69, 19)); // Color marrón
        g2d.fillRect(75, 150, 50, 100);

        // Dibujar los brazos
        g2d.fillRect(25, 150, 50, 20);
        g2d.fillRect(125, 150, 50, 20);

        // Dibujar las piernas
        g2d.fillRect(75, 250, 20, 50);
        g2d.fillRect(105, 250, 20, 50);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("Minecraft Monkey");
        MinecraftMonkey monkey = new MinecraftMonkey();
        frame.add(monkey);
        frame.setSize(200, 400);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

8. Conclusión y Siguientes Pasos

Con estos conceptos básicos ya podemos empezar a dibujar en Java usando Swing. Los siguientes pasos incluirán:

Animaciones para mover objetos en la pantalla.
Eventos de teclado y ratón para hacer dibujos interactivos.
Creación de juegos sencillos utilizando estos principios.

¡Practica dibujando distintas formas y experimentando con colores para familiarizarte con el entorno de desarrollo en Java Swing! 🚀

Modo Debug

Ejecuta, falla, aprende…