Ayudanos contestando la siguiente encuesta acerca de Videojuegos!
Ir a la encuesta
>

Dibujar

 

Archivos necesarios:

Dibujar en un JFrame no es tan sencillo como dibujar en un Applet (o JApplet) y es muy difícil saber los tamaños que los objetos deberían tener ya que los manejadores de layout pueden cambiar la posición de los controles y componentes de nuestras aplicaciones. Por eso no podemos dibujar directamente sobre la forma sino que creamos un componente sobre el cual dibujar. Crear un componente es algo muy sencillo que además nos da mucha libertad al dibujar. Además en este trial veremos una nueva clase hecha especialmente para dibujar llamada Graphics2D que es mucho más poderosa que la clase Graphics que utilizamos hasta ahora.

En este trial vamos a utilizar dos archivos de java, el primero es una forma muy sencilla que solamente incluye un par de botones y un JTextField para introducir datos, la otra clase es la que utilizamos para dibujar.

Main.java
Main.java

Main.java
Board.java

 

¿Cómo dibujar?

Primero veamos como vamos a crear el componente sobre el cual dibujar, para hacer esto debemos crear una clase que extienda JComponent en vez de JFrame como se ve en la foto de la derecha.

extends
paint Dentro de esta clase ahora si podemos poner el método paint(). Recuerda que el método paint() recibe un objeto de la clase Graphics y que con ese objeto vamos a dibujar todo lo que necesitemos. Como podemos ver en la imágen de la izquierda el objeto Graphics lo vamos a convertir a un objeto Graphics2D para poder utilizar esta clase para dibujar. La clase Graphics2D tiene todos los métodos de Graphics y además algunos nuevos.
Como podemos ver en la imágen de la derecha los métodos de la clase Graphics2D son practicamente iguales a los de la clase Graphics. La principal diferencia es que Graphics2D tiene métodos y funciones nuevas que nos permiten cambiar la manera en la que dibujamos. Veamos un poco más de cerca el método setStroke(). Este método recibe un objeto Stroke (en este caso BasicStroke, otros están fuera del alcance de este trial) que podemos iniciar con el constructor que recibe un float. El método setStroke() nos permite establecer el tamaño de los bordes al dibujar (recuerda que si las funciones que emipezan con fill no tienen bordes pero las funciones que empiezan con draw si). metodos1
shapes

Ahora veremos una opción más que nos brinda el lenguaje para manejar colores especiales. Ya aprendimos a cambiar los bordes de las figuras, ahora veamos como cambiar el color con el que se dibuja. Como recordaran el método setColor() nos permite elegir el color con el que vamos a dibujar, pero al igual que con los bordes Graphics2D nos proporciona un método mucho más poderoso para manejar colores.

Las pinturas nos permiten elegir un modo especial de pintar, la pintura que veremos en este trial es GradientPaint, una pintura que nos permite hacer un degradado de colores. Para empezar debemos crear un nuevo objeto de GradientPaint, como vemos en la figura, con el constructor que recibe la posición (x,y) donde empieza el degradado y el color con el que va a empezar; y la posición (x,y) donde termina el degradado y el color con el que va a terminar. Recuerda que puedes utilizar las constantes de la clase Color como Color.BLACK, Color.RED, Color.GREEN, etc.

Ahora que ya tenemos nuestro GradientPaint debemos ponerle la pintura a nuestro objeto Graphics2D, para hacer esto utilizamos el método setPaint() pasando como parametro la variable GradientPaint que acabamos de crear. El problema con utilizar pinturas es que los métodos que conocemos para dibujar no funcionan al utilizarlas, por lo que vamos anecesitar utilizar los métodos fill y draw de la clase Graphics2D que reciben un objeto de la clase Shape, entre los objetos que podemos utilizar están:

  • Rectangle2D.Double(x, y, width, height)
  • Ellipse2D.Double(x, y, width, height)
  • RoundRectangle2D.Double(x, y, width, height, arcWidth, arcHeight)

Como puedes ver todos llevan un punto después del nombre y un Double, esto quiere decir que va a crear una forma utilizando los valores tipo double que le pasemos y se consideran parte del constructor. Es muy importante fijarse que los constructores son muy diferentes para la pintura y para las figuras, mientras que en uno recibe los puntos (x,y) de inicio y fin en los otros reciben los puntos (x,y) de inicio y el ancho y la altura por lo que no podemos utilizar los mismos parámetros para los dos aunque sean muy similares.

Ya que tenemos el método paint() de nuestro JComponent podemos utilizarlo en cualquier lugar de nuestras aplicaciones. Como nuestra clase es un componente podemos utilizarla en cualquier parte de la interfaz gráfica, podemos añadirla a algún panel y podemos hacer todo lo que haríamos con los otros comopnentes que ya sabemos utilizar. Entonces para utilizarla creamos una clase nueva que va a ser la ventana principal y ahí utilizamos el manejador de interfaz que más nos guste para poner nuestros componentes y entre ellos ponemos un objeto de la clase Board que acabamos de crear. Para crear un nuevo objeto puedes usar el constructor:

Board draw = new Board();

grafica
Esto crea un nuevo Board y lo inicia . Si te fijas en la foto, el Board es un componente más de la interfaz (en la foto está rodeado de un brillo amarillo para que sepas cuál es) pero únicamente se encarga de dibujar lo que nosotros le pedimos. Recuerda que puedes utilizar draw.repaint() para que se vuelva a pintar lo que está adentro y puedes hacer métodos en la clase que creamos para obtener datos y dibujarlos (por ejemplo, el método drawGraph() de nuestra clase es el que va añadiendo barras a la gráfica).

RegresarRegresar

             
Ayudanos contestando la siguiente encuesta acerca de Videojuegos!
Ir a la encuesta