Los gráficos en Java permite realizar cualquier tipo de dibujo con base en figuras básicas como rectángulos, arcos, imágenes, textos, óvalos, polígonos y poli líneas.
Un grafico se puede realizar en cualquier contenedor, sin embargo, la mejor practica es realzarlo sobre un JPanel. El JPanel contiene un método sobre escribible denominado paint que recibe un parámetro Graphics. En este método se debe realizar toda la implementación de dibujo de la aplicación.
Para asegurar el bajo acoplamiento, se recomienda aplicar una arquitectura en donde en su capa de presentación se cree una clase que herede de JPanel en donde se implementen los diferentes algoritmos de dibujo. En este caso, se debe incluir un JFrame y en él incluir una referencia del JPanel que se agregaría al JFrame. Para agregar el JPanel al JFrame, se hace necesario especificar un Layout al JFrame. Si no se le asigna Layout, por defecto tendrá null, el cual permitiría agregar el JPanel con un tamaño y posición fija.
Lo más apropiado es agregar al JFrame Border Layout, de esa forma, el JPanel quedará con tamaño dinámico, pero el dibujo tendrá que ser también dinámico.
Con el fin de facilitar el uso de eventos sobre el JPanel que requieran el mouse, se recomienda, crear una instancia aparte de la clase JPanel y a él agregar la instancia de PDibujo. La instancia del JPanel en cualquier caso debería tener Border Layout
La clase Graphics, permite realizar dibujos sobre el JPanel a través del método paint. Esta clase está directamente relacionada con la clase Color, ya que a través de ésta, se puede definir un color con el cual la instancia de Graphics puede pintar. La clase Color, proporciona colores del formato RGB, los cuales pueden ser incluidos en el constructor.
Para graficar es importante tener en cuenta las coordenadas que se utilizan en computación. Estas coordenadas inician el (0,0) en la esquina superior izquierda y terminan en (x,y) en la esquina inferior derecha en donde x,y equivalen al ancho y alto del panel respectivamente. La siguiente figura ilustra el manejo de coordenadas.
Formas de Graphics
A través de la clase Graphics es posible dibujar una gran cantidad de formas como rectángulos, arcos, imágenes, textos, óvalos, polígonos y poli líneas.
Linea
Una línea se puede obtener mediante el siguiente método:
Este método dibuja un rectángulo con la esquina superior izquierda en la coordenada (x,y). Tiene un ancho y alto dados por los parámetros width y height. Esto indica que la coordenada de la esquina inferior derecha es (x+width,y+height).
Este método dibuja un rectángulo con las mismas características de posición y tamaño del método drawRect. Adicionalmente dibuja las esquinas redondeadas con base en los parámetros arcWidth y arcHeight.
Este método dibuja un rectángulo con las mismas características de posición y tamaño del método drawRect. Adicionalmente, llena de color el rectángulo.
Este método dibuja un rectángulo con las mismas características de posición, tamaño y esquinas del método drawRoundRect. Adicionalmente, llena de color el rectángulo.
Ovalo
Un óvalo se puede obtener mediante diferentes métodos como:
Este método dibuja un ovalo con la esquina superior izquierda en la coordenada (x,y). Tiene un ancho y alto dados por los parámetros width y heigh. Esto indica que la coordenada de la esquina inferior derecha es (x+width,y+height).
Una línea de color azul con el primer punto en las coordenadas (10,10) y el segundo punto en las coordenadas (10,100).
Un rectángulo sin relleno de color verde con el punto superior izquierdo en las coordenadas (20,10) y el punto inferior derecho en las coordenadas (50,100)
Un rectángulo con relleno de color verde con el punto superior izquierdo en las coordenadas (80,10) y el punto inferior derecho en las coordenadas (50,100)
Un rectángulo sin relleno de color verde con el punto superior izquierdo en las coordenadas (140,10) y el punto inferior derecho en las coordenadas (50,100). Además tiene bordes redondeados con un alto y ancho de 20 pixeles, es decir, desde la esquina hasta donde inicial la curva de redondeo hay 20 pixeles tanto en el eje X como en Y
Un rectángulo con relleno de color verde con el punto superior izquierdo en las coordenadas (200,10) y el punto inferior derecho en las coordenadas (50,100). Además tiene bordes redondeados con un alto y ancho de 20 pixeles, es decir, desde la esquina hasta donde inicia la curva de redondeo hay 20 pixeles tanto en el eje X como en Y
Un óvalo sin relleno de color rojo con el punto superior izquierdo en las coordenadas (260,10) y el punto inferior derecho en las coordenadas (50,100). Esto indica que el óvalo tiene su punto máximo superior en la coordenada Y=10, su punto máximo a la izquierda en la coordenada X=260, su punto máximo inferior en la coordenada Y=10+100=110 y su punto máximo a la derecha en la coordenada Y=260+50=310.
Un ovalo con relleno de color rojo con el punto superior izquierdo en las coordenadas (320,10) y el punto inferior derecho en las coordenadas (50,100).
Un polígono con 5 puntos sin relleno de color violeta.
Un polígono con 5 puntos con relleno de color violeta.
La palabra "Hola mundo" de color gris, con fuente Tahoma y tamaño 25 pixeles en la coordenada inferior izquierda (120,150)
El resultado es como se presenta en la siguiente figura.
Paneles Estáticos y Dinámicos
Si se desea pintar una cuadricula de color gris colocando de fondo color blanco, se podría realizar la siguiente implementación en la clase PDibujo con base en que la resolución de este panel es de 360 pixeles de ancho por 240 pixeles de alto como se definió en el método setBounds. Esta implementación utiliza el método fillRect para pintar un cuadrado blanco del tamaño del panel y el método drawLine para pintar cada línea en el panel.
El resultado es como se muestra en la siguiente figura.
En esta implementación, la cuadrícula es estática debido a que el tamaño del panel también lo es. El tamaño de cada celda entonces es de 36 x 24 pixeles para lograr una cuadricula de 10 filas por 10 columnas. Esta implementación genera un defecto que consiste en que al maximizar o cambiar de tamaño el JFrame, la grafica no se adapta al nuevo tamaño.
Modificando el Layout del JFrame a Border Layout, se obtiene un panel dinámico y su cuadrícula también lo sería. La implementación de las dos clases es la siguiente.
En este caso, se debe calcular el ancho y alto del panel a través de los métodos this.getSize().getWidth() y this.getSize().getHeight(). Así mismo el alto y ancho de cada celda el cual corresponde al ancho y alto del panel dividido en 10, ya que ese es el número de celdas deseadas. Se debe hacer casting a int, debido a que el método drawLine recibe en sus parámetros este tipo de dato.
El resultado es como se muestra en la siguiente figura.
Graficas de Señales
Para graficar señales como seno y coseno, lo más apropiado es crear una capa de lógica de negocio que contenga las clases seno y coseno. Sin embargo para asegurar escalabilidad al proyecto, se debería crear una clase abstracta llamada “Senal” que herede atributos y métodos necesarios para el dibujo. La implementación es la siguiente.
Las clases Seno y Coseno implementan un método llamado calcular que retorna un arreglo de puntos. Estos puntos son los valores de la señal con la amplitud, frecuencia y offset (desfase en el eje Y) asignados a través del constructor. Los parámetros ancho y alto, indican la cantidad de pixeles del panel, debido a que este es dinámico.
Los puntos de la señal se calculan, haciendo un proceso iterativo que depende del número de pixeles en el eje X. Los puntos dependen del nivel de offset que se multiplican por el alto del panel y divide en 10 debido a que la cuadricula posee 10 filas. Al nivel offset se le suma la señal cuya amplitud se multiplica por el atributo correspondiente por el alto dividido 10, con el fin de que la señal ocupe en el eje Y una amplitud proporcional a las filas de la cuadricula. Las señales seno y coseno, reciben por parámetro el ángulo en radianes, por lo que se debe realizar la conversión a frecuencia multiplicando por pi y dividiendo por 180.
El JFrame, entonces debe cambiar para ofrecer un mecanismo que asigne valores a las señales. En este caso, se propone tres cuadros de texto para los valores un botón para dibujar la señal seno y un botón para dibujar la señal coseno.
La anterior clase presenta las siguientes características:
Posee un panel en el centro con la gráfica.
Posee un panel en el sur con los componentes necesarios para enviar los parámetros de amplitud, frecuencia y offset de las señales.
Posee un método para un botón Seno que crea un objeto instancia de la clase Seno en la capa de lógica, al que se le envía por el constructor los valores de amplitud, frecuencia y offset. Este método envía el objeto al objeto pDibujo a través del método actualizar.
Posee un método para un botón Coseno que crea un objeto instancia de la clase Coseno en la capa de lógica, al que se le envía por el constructor los valores de amplitud, frecuencia y offset. Este método envía el objeto al objeto pDibujo a través del método actualizar.
La anterior clase presenta las siguientes características:
Posee un método actualizar que asigna el objeto senal.
Posee un método paint que coloca el fondo blanco al panel, la cuadrícula y dibuja la senal basado en los puntos retornados por Seno y Coseno. Pintar la gráfica consiste en pintar un conjunto de líneas desde un punto hasta el punto siguiente. El método drawLine, permite dibujar las líneas en mención. Los parámetros del eje Y, tienen un valor que depende del alto del panel, con el fin de ubicar la senal en la mitad.
Los resultados se presentan en las siguientes figuras.
No hay comentarios:
Publicar un comentario