La clase Graphics

Hoy vamos a hablar más acerca de la clase Graphics. Está clase me permite dibujar en pantalla, mostrar incluso imágenes y como se vio en el post anterior es posible mostrar textos. La clase Graphics se crea justo en el método paint() como se vio en la clase HelloCanvas del ejemplo pasado, este método lo reproduzco enseguida:

public void paint(Graphics g) {
 g.drawString("Hola mundo, en modo gráfico",0,0,Graphics.TOP|Graphics.LEFT);
}

Otra vez, la declaración del objeto de la clase Graphics es así:
                                            Graphics  g

Con la declaración anterior, por medio del objeto g, ya puedo usar los métodos de la clase, uno de estos métodos es 

                                           drawString

pero existen muchos métodos más basta con ver la documentación de la clase Graphics, para conocer algunos de sus métodos. La figura siguiente muestra algunos de ellos directamente de la documentación de J2ME (puedes dar clic en la imagen para verla mas grande).

 

Claro que para ver la documentación como se muestra en la imagen se debe tener instalado el SonyEricsson SDK, dando clic aquí   ver el post para su instalación, por si todavía no lo tienes.

 

Método drawLine

 

Como se ve en la figura la clase Graphics tiene infinidad de métodos, ya conocemos uno el drawString, vemos otro:

 drawLine

 

En la documentación dando clic en el método nos lleva a su descripción la cual es mostrada en la siguiente imagen:

La descripción nos dice que el método dibuja una línea entre las coordenadas (x1, y1) y ( x2, y2). Por ejemplo:

                                 drawLine(0, 0, 100, 100);

Dibuja una línea de la coordenada (0,0) a la (100, 100), como se usa el método así:

public void paint(Graphics g) {
   g.drawLine(0, 0, 100, 100);
}

Para usar cualquier método de la clase Graphics, se debe hacer por medio del objeto esa es la razón de que se le agregue la g y el punto y todo lo anterior debe estar dentro del método paint. La figura siguiente muestra la línea en el emulador:

Note como en el emulador no se borran las letras, cuando lo programe físicamente en el celular ahí si se borraba todo y aparecía solo la línea. Más adelante vemos como cambiar eso, para que no aparezcan esas letras.

 

Método setColor

 

En la figura siguiente muestro el método setColor tal y como está en la documentación de J2ME:

 

Este método establece el color en términos de valores RGB (dando clic en el hipervínculo podemos ver la explicación desde la WikiPedia, e incluso se pueden ver los valores para los distintos colores), estos valores son pasados por medio de los parámetros por ejemplo:
.

Negro                         setColor(0, 0, 0)

Blanco                        setColor(255, 255, 255)

 

Este Si se vio el enlace desde la wikipedia está dice qué el color blanco es con el numero FF FF FF, esos valores están en  hexadecimal, según dicen, es mejor manejarlos así, entonces el FF es igual al 255 en decimal. Por cierto si deseo escribirlo en hexadecimal también es posible en java usando el operador 0x, así quedaría el color blanco en hexadecimal

 

                               setColor(0xFF, 0xFF, 0xFF)

 

 Los tres colores básicos se forman así:

Color      en decimal                en hexadecimal                           
Rojo     setColor(255, 0, 0)       setColor(0xFF, 0, 0)
Verde    setColor(0, 255, 0)       setColor(0, 0xFF, 0)  
Azul     setColor(0, 0, 255)       setColor(0, 0, 0xFF)  

Combinando los valores RGB podemos obtener prácticamente cualquier color, la misma wikipedia nos da ejemplos de otros colores por ejemplo:

 

Amarillo                     setColor(0xFF, 0xFF, 0x00)

Purpura                     setColor(0x80, 0x00, 80)

 

Puedes ver más colores desde el artículo de la wikipedia si lo deseas.

 

Como hago uso del método, ya te lo has de imaginar, por ejemplo si deseo crear tres líneas dos horizontales y una vertical, una roja, otra verde y la otra azul, escribo dentro del método paint así:

public void paint(Graphics g) {

     g.setColor(0xFF, 0, 0);  // Se establece el color rojo
     g.drawLine(0, 50, 100, 50); // Se dibuja la primer línea horizontal
     g.setColor(0, 0xFF, 0);  // Se establece el color verde
     g.drawLine(0, 150, 100, 150); // Se dibuja la segunda línea horizontal
     g.setColor(0, 0, 0xFF);  // Se establece el color azul
     g.drawLine(100, 50, 100, 150); // Se dibuja la línea vertical
}

Al ejecutar el código se vería lo siguiente:

Método fillRect

 

La figura siguiente muestra la documentación de este método:

Dibuja un rectángulo relleno con el color actual, a partir de la coordenada (x,y) con un ancho y un alto especificado en los parámetros width y height. Por ejemplo:

public void paint(Graphics g) {
 g.setColor(0xFF, 0, 0);  // Se establece el color rojo
 g.fillRect(45, 60, 100, 100); // rectángulo relleno
}

Al ejecutar el código se muestra la figura siguiente

En este caso dibuja el rectángulo a partir de la coordenada (25, 60) con un ancho de 100 pixeles y con un alto también de 100 pixeles.

 

Ahora te toca a ti, nos llevaría mucho tiempo ver todos y cada uno de los métodos de la clase Graphics, son más de 20, así que no lo voy a hacer, más adelante usare algunos métodos y los explicaré pero hay muchos con los cuales tu puedes practicar, aquí les muestro como se hace, simplemente ver la documentación y a probar como se comporta, así que tu experimenta con los otros métodos.

 

Ancho y Alto de la Pantalla

 

Para finalizar este post, veré dos métodos que me permiten obtener el ancho y alto de la pantalla del celular en el modo gráfico:

 

getWidth(): Obtiene el ancho en pixeles de la pantalla disponible del celular

getheight(): Obtiene el alto en pixeles de la pantalla disponible del celular

 

Estos métodos se heredan a la clase Canvas por eso no tengo que crear ningún objeto, son métodos que puede usar directamente, así por ejemplo si deseo rellenar la pantalla con un color de fondo hago lo siguiente:

public void paint(Graphics g) {
     g.setColor(0xFF, 0, 0);  // Se establece el color rojo
     g.fillRect(0, 0, getWidth(), getHeight);
}

El resultado es el siguiente:

Se acostumbra iniciar el método paint con una llamada a ese par de instrucciones, esto con la finalidad de “borrar” toda la pantalla, se acostumbra el blanco pero puede ser el que cada quien desee.

 

Así por ejemplo si me piden dibujar una línea, un cuadrado sin rellenar, y un cuadrado relleno este sería el código:

 

public void paint(Graphics g) {
      g.setColor(255,255,255); // se establece el color blanco
      g.fillRect (0, 0, getWidth(), getHeight()); // "borra" la pantalla
      g.setColor(10,200,100);
      g.drawLine (0, 0, 100, 100);
      g.drawRect(90, 50, 30, 30);
      g.fillRect (50, 50, 30, 30);
}

Note como ya no se ve ninguna de las letras que aparecía antes, ahora si esta el área de dibujo libre, solo aparece lo que yo mande dibujar.