some image

Codes and Tags

Creación de dibujo simple con el método paintComponent

Etiquetas: , , , , , Blog, Programación 1 comment

Captura de pantalla 2015-06-18 00.15.24

 

Puede que la creación de dibujos simples en JAVA no sea muy útil en el campo laboral de un programador promedio, aún así es un buen ejercicio aprender algo nuevo sobre la interfaz gráfica de usuario (GUI) y de paso poder profundizar mas en el uso de los ciclos repetitivos while (ya verán porque).

Además de todo lo anterior es de gran ayuda entender como funciona el sistema de coordenadas y como se puede ubicar un punto en el contenedor del programa.

Para empezar hay que tener en cuenta que el sistema de coordenadas empieza desde la esquina superior izquierda donde las parejas ordenadas vendrían siendo (0,0) y finaliza en el último punto de la pantalla de la esquina inferior derecha donde las parejas ordenadas son el tamaño de ancho y alto de la aplicación.

Basado en lo dicho anteriormente se puede escoger el punto inicial y final de nuestro dibujo, sin embargo puedes preguntarte… Que pasaría si cambias el tamaño de la ventana de tu aplicación?.

La respuesta es que tu dibujo no se re-acomodaría al nuevo tamaño de la pantalla y posiblemente quede volando o sobrando según sea el caso. Por ese motivo se deben de crear dos variables que puedan traer el ancho y alto de la aplicación y después de esto con la formula porcentual puedes escoger el inicio y final de tu dibujo.

Teniendo claro esto ya se puede entrar a jugar con los ciclos repetitivos while y crear la figura o dibujo que se desea, yo decidí hacer una c dentro de dos etiquetas (mayor que y menor que ) que vendría siendo un sencillo logo de codes and tags, acá les va el código…

Clase que crea el panel

 

package codesdraw;
import javax.swing.JPanel;
import java.awt.Graphics;

//Clase CodesPanel hereda todos los componentes de la clase JPanel
public class CodesPanel extends JPanel{
    public void paintComponent(Graphics g){
        super.paintComponent(g);
        //Se obtiene el ancho y alto de la aplicación
        int anchura = getWidth();
        int altura = getHeight();
        //Se definen los puntos X y Y que eventualmente serán cambiados según sea el caso
        int puntoInicioX =  (anchura / 100) * 15;
        int puntoInicioY =  (altura / 100) * 60;
        //la variable recorrido es el espacio que habrá entre cada nuevo caracter del dibujo
        int recorrido =  (anchura / 100) * 2;
        //Los limites son utilizados para determinar el final del dibujo
        int limite1 = (anchura / 100) * 50;
        int limite2 = (anchura / 100) * 60;
        int limite3 = (altura / 100) * 45 ;
        int limite4 = (altura / 100) * 77 ;
        int limite5 = (anchura / 100) * 45 ;
        int limite6 = (anchura / 100) * 65 ;
        //Variables tipo String que contienen el caracter que tendrán las imagenes
        String caracter1 = "*";
        String caracter2 = "+";


        //Ciclos while que crean la figura de la etiqueta
        while(puntoInicioX < limite1){
            g.drawString(caracter1, puntoInicioX, puntoInicioY);
            puntoInicioX += recorrido;
            puntoInicioY -= recorrido;
        }

        puntoInicioX =  (anchura / 100) * 15;
        puntoInicioY =  (altura / 100) * 60;

        while(puntoInicioX < limite1){             g.drawString(caracter1, puntoInicioX, puntoInicioY);             puntoInicioX += recorrido;             puntoInicioY += recorrido;         }         puntoInicioX =  (anchura / 100) * 95;         puntoInicioY =  (altura / 100) * 60;         while(puntoInicioX >= limite2){
            g.drawString(caracter1, puntoInicioX, puntoInicioY);
            puntoInicioX -= recorrido;
            puntoInicioY -= recorrido;

        }

        puntoInicioX =  (anchura / 100) * 95;
        puntoInicioY =  (altura / 100) * 60;

        while(puntoInicioX >= limite2){
            g.drawString(caracter1, puntoInicioX, puntoInicioY);
            puntoInicioX -= recorrido;
            puntoInicioY += recorrido;

        }

        //Ciclos while que dibujan la C dentro de las etiquetas < >

        puntoInicioX =  (anchura / 100) * 65;
        puntoInicioY =  (altura / 100) * 50;
        while(puntoInicioY > limite3){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioY -= recorrido;

        }



        puntoInicioX =  (anchura / 100) * 65;
        puntoInicioY =  (altura / 100) * 45;
        while(puntoInicioX > limite5){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioX -= recorrido;
        }



        puntoInicioX =  (anchura / 100) * 47;
        puntoInicioY =  (altura / 100) * 45;
        while(puntoInicioY < limite4){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioY += recorrido;

        }

        puntoInicioX =  (anchura / 100) * 47;
        puntoInicioY =  (altura / 100) * 77;
        while(puntoInicioX < limite6){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioX += recorrido;

        }


    }
}

Clase principal

package codesdraw;


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

public class CodeDraw {
    public static void main(String args[]){
        //Se instancia la clase CodePanel
        CodesPanel panel = new CodesPanel();
        JFrame aplicacion = new JFrame();
        //Se agrega el panel dentro del JFrame
        aplicacion.add(panel);
        //Cambio color del fondo y la letra
        panel.setBackground(Color.black);
        panel.setForeground(Color.green);
        aplicacion.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        //tamaño de la ventana
        aplicacion.setSize(350,350);
        aplicacion.setVisible(true);

    }
}

Acá puedes descargar el proyecto desde mi repositorio en GITHUB —> paintComponent

 

Para terminar me gustaría compartir otro ejemplo algo mas complejo del uso que se le puede dar al método paintComponent.

Captura de pantalla 2015-06-18 00.23.48

About Juan Gomez

Related Posts

  • Logo Java
  • Logo Java
  • Logo Java
  • Logo Java

1 comment

Luis - abril 2, 2016 Reply

Muy buen ejercicio, yo estoy aprendiendo java y quiero hacer que dando el tamaño a un Jframe crea un jpanel y en este le cambie el tamaño, que la imagen quede centrada pero de un tamaño menor al del frame. Espero me puedas decir como se hace esto.

Leave a Reply Cancel