J2ME Canvas

download J2ME Canvas

of 40

Transcript of J2ME Canvas

Canvas

Clase Canvas

Es la clase central de las interfaces de usuario personalizadas. Para trabajar con ella solo se debe crear una subclase de ella y sobre escribir el mtodo paint(). En las clases que heredan de Screen no es necesario indicarle cuando se ha presentado una modificacin, en el caso de Canvas es algo que se debe hacer de forma explcita

Clase Canvas

En las clases que heredan de Screen no es necesario indicarle cuando se ha presentado una modificacin, en el caso de Canvas es algo que se debe hacer de forma explcita invocando al mtodo repaint(), el cual invocar eventualmente al mtodo paint().

Coordenadas

Hay que tener en cuenta el origen del sistema de coordenadas de la clase Canvas, se sita en el punto superior izquierda de la pantalla del dispositivo, de esta forma la coordenada y crece hacia abajo y la coordenada x crece hacia la derecha, las coordenadas son nmeros enteros positivos.

Ancho y Alto

Podemos obtener el ancho y el alto de un Canvas con los mtodos int getWidth() y int getHeight(), estos valores estarn condicionados por las caractersticas del dispositivo. Tambin podemos ver si el dispositivo tiene un sistema de doble buffer para que las animaciones se hagan de una forma suave con el mtodo boolean isDoubleBuffered().

Colores

Para ver si el dispositivo tiene colores (no es slo en blanco y negro) y la cantidad de colores podemos utilizar los mtodos boolean isColor() y int numColors() de la clase Display.

La Clase Graphics

La clase Graphics nos va a permitir realizar operaciones para dibujar en la pantalla del dispositivo. No tendremos que crearla, ya que el mtodo paint() es llamado por el dispositivo y este entrega como parmetro dicho objeto.

Atributos de la Clase GraphicsAtributo Color Font Stroke Style Uso El color que se va a utilizar a la hora de dibujar en el Canvas La fuente que se va a usar para renderizar texto. Determina como se van a dibujar lneas, rectngulo y arcos. Valor inicial Negro La que tenga el dispositivo por defecto Lnea slida

Origen

La posicin del origen de coordenados (0,0), relativa a la posicin arriba izquierda del CanvasEl clip de la regin del Canvas donde las operaciones grficas tienen efecto

La parte de arribaizquierda del Canvas

Clip

Depende del motivo por el cual paint() se ha llamado

Dibujar Lneas

La clase Graphic nos permite dibujar lneas, rectngulo y arcos, dentro del mtodo paint(). Para dibujar una lnea tenemos el siguiente mtodo:

void drawLine(int x1, int y1, int x2, int y2)

Los parmetros x1 y y1 indican el punto de comienzo de una lnea, mientras que el punto x2 y y2 indican el punto final.

Dibujar Rectngulos

Para dibujar un rectngulo tenemos el siguiente mtodo:

void drawRect(int x, int y, int width, int height)

Los parmetros x, y indican la localizacin de la esquina superior izquierda del rectngulo y los parmetros width y height especifican el ancho y el alto del rectngulo.

Tambin existe un mtodo para dibujar rectngulos con las esquinas redondeadas:

public void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

Donde arcWidth arcHeight que configuran el ancho y el alto del arco de las esquinas del rectngulo.

Dibujar Rectngulos

Adems tambin tenemos dos mtodos para dibujar rectngulos rellenos:

public void fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) public void fillRect(int x, int y, int width, int height)

Dibujar Arcos

Otra primitiva grfica son los arcos. Un arco es una parte de una elipse, el mtodo que dibuja un arco es el siguiente:

public void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) Este mtodo dibuja un arco que comienza en startAngle y se extiende por arcAngle grados. ngulos con 0 grados estn a la posicin de las 3 en punto.

Dibujar Arcos

Un valor positivo para los arcos indica un sentido en las agujas del reloj y un valor negativo indica en sentido contrario a las agujas del reloj. El arco est dentro de un rectngulo y el centro de este rectngulo est dado por las coordenadas (x, y) y su alto y ancho viene dado por width y height (si estos valores son menores a cero, no se dibuja nada).

Dibujar Arcos

Dibujar Arcos

Tambin podemos crear arcos rellenados con el mtodo fillArch

public void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

Fuentes

La clase Graphics tiene cuatro mtodos para dibujar texto en un Canvas:

public void drawChar(char character, int x, int y, int anchor)

Este primer mtodo escribe un carcter en la posicin x, y. El parmetro anchor es lo que se denomina anclaje del texto, el anclaje del texto est formado por dos constantes (una horizontal y otra vertical) que nos va a dar un punto alrededor del texto.

Fuentes

De esta forma, la coordenada x, y es la coordenada el punto de anclaje del texto y este punto de anclaje se puede especificar con anchor y es una parte de los rectngulos que envuelve el texto, tal y como se ve en la Figura.

Constantes usadas para situar el anclaje

Constantes horizontales:

LEFT HCENTER RIGHTTOP BASELINE BOTTOM

Constantes verticales:

Mtodos para imprimir cadenas

public void drawString(String str, int x, int y, int anchor) public void drawSubstring(String str, int offset, int len, int x, int y, int anchor)

De estos dos mtodos para trabajar con cadenas, el primero escribe en pantalla la cadena que se le pasa como parmetro. Y en el segundo escribimos la subcadena que va desde offset a offset+length-1.

Configurar Fuente

El texto que se escribe mediante la clase Graphics, estar configurado por el atributo font. Este atributo se puede cambiar u obtener con:

public Font getFont() public void setFont(Font font)

Configurar Fuente

Para usar una clase Font se usa el mtodo esttico getFont(...) de Font (no confundir con el getFont de Graphics):

public static Font getFont(int face, int style, int size) Donde los parmetros indican la forma, estilo y tamao de la fuente.

Parmetros de la Clase Font

face:

Font.FACE_MONOSPACE: Fuente con anchura fija Font.FACE_PROPORTIONAL: Fuente proporcional Font.FACE_SYSTEM: Fuente del sistema (como esto no est bien especificado en MIDP, suele ser igual a la proporcional)

Parmetros de la Clase Font

Style:

Font.STYLE_PLAIN: Texto normal Font.STYLE_BOLD: Texto en negrita Font.STYLE_ITALIC: Texto en cursiva Font.STYLE_UNDERLINED: Texto subrayado

Los estilos pueden combinarse menos con STYLE_PLAIN

Parmetros de la Clase Font

Size:

Font.SIZE_SMALL: Texto pequeo Font.SIZE_MEDIUM: Texto normal Font.SIZE_LARGE: Texto grande

Imgenes

La claseImage tiene cuatro mtodos estticos para crear una imagen:

public static Image createImage(String name) throws java.io.IOException public static Image createImage(byte[] imageData, int imageOffset, int imageLength) public static Image createImage(int width, int height) public static Image createImage(Image source)

Imgenes

El primer constructor crea una imagen leyndola desde un fichero. El segundo crea la imagen a partir de un array de datos.

Estos dos primeros mtodos crean imgenes inmutables, es decir, que no se pueden modificar. Las imgenes inmutables son necesarias para los tem de alto nivel del API como ImageItem, que no se tienen que preocupar de repintar la imagen si ha sido modificada.

Imgenes

El tercer mtodo crea una imagen cuyo tamao se le pasa como parmetro y en la que todos los pxeles estn inicialmente en blanco.

Esta imagen es mutable, es decir, se puede modificar con un objeto Graphics igual que se hace con el Canvas, usando el mtodo getGraphics() de Image.

Imgenes

El cuarto mtodo nos permite crear una copia inmutable de una imagen mutable. Para dibujar una imagen (mutable o inmutable) el Canvas en su mtodo paint(), se usa el siguiente mtodo de la clase Graphics:

public void drawImage(Image img, int x, int y, int anchor)

Donde el primer parmetro es la imagen, el segundo y tercero nos dan las coordenadas del punto de anclaje y el cuarto parmetro nos da el anclaje de la imagen.

Anclaje en las Imgenes

El anclaje en las imgenes funciona de forma anloga a como funciona en el texto, pero teniendo en cuenta que BASELINE no se puede usar (no tendra sentido) y en cambio tenemos VCENTER que no es vlido para texto y que nos da el centro en vertical de la imagen.

Comandos

En el API de bajo nivel nos tenemos que encargar nosotros de manejar y procesar todas las entradas del usuario, es decir, no pasa como cuando usbamos un TextBox, donde conforme vamos escribiendo se refleja en la pantalla y adems se va almacenando en la memoria del tem.

Comandos

En la seccin de bajo nivel trataremos con dos tipos de entradas las provenientes de teclado que las poseen todos los dispositivos y las de puntero, que no todos la soportan.

Comandos de Teclado

Para realizar el tratamiento de teclas desde la API de bajo nivel, la nica forma que tenemos es sobrescribir los siguientes mtodos de la clase Canvas:

protected void keyPressed(int keyCode) protected void keyReleased(int keyCode) protected void keyRepeated(int keyCode)

Comandos de Teclado

Los mtodos keyPressed y keyReleased son fciles de entender, se llaman cuando el usuario presiona una tecla y cuando la libera, respectivamente. El mtodo keyRepeated se activa cuando el usuario tiene pulsada una tecla por ciento tiempo sin liberarla, no todos los dispositivos soportan esto, para ello tendremos que verificarlocon el mtodo boolean hasRepeatEvents().

Parmetros de las TeclasKey Code KEY_NUM0 KEY_NUM1 KEY_NUM2 KEY_NUM3 KEY_NUM4 KEY_NUM5 KEY_NUM6 KEY_NUM7 KEY_NUM8 KEY_NUM9 KEY_STAR Significado Tecla nmero 0 del telfono Tecla nmero 1 del telfono Tecla nmero 2 del telfono Tecla nmero 3 del telfono Tecla nmero 4 del telfono Tecla nmero 5 del telfono Tecla nmero 6 del telfono Tecla nmero 7 del telfono Tecla nmero 8 del telfono Tecla nmero 9 del telfono Tecla asterisco (*) del telfono

Parmetros de las TeclasKey Code KEY_POUND Significado Tecla sostenido (#) del telfono

UPDOWN LEFT RIGHT FIRE GAME_A GAME_B GAME_C GAME_D

Tecla de juego ArribaTecla de juego Abajo Tecla de juego Izquierda Tecla de juego Derecha Tecla de juego Disparo Tecla de juego A Tecla de juego B Tecla de juego C Tecla de juego D

Comandos del Apuntador

Se trabaja con los siguientes mtodos:

protected void pointerPressed(int x, int y) protected void pointerDragged(int x, int y) protected void pointerReleased(int x, int y)

Comandos del Apuntador

En los tres casos los argumentos x y y dan la posicin del apuntador relativa a la esquina superior izquierda de la clase Canvas. Se puede determinar si el apuntador generar eventos pointerPressed y pointerReleased si el mtodo boolean hasPointerEvents() de Canvas es cierto.

Comandos del Apuntador

Si el mtodo boolean hasPointerMotionEvents() de Canvas es cierto, entonces se soportan eventos pointerDragged, que indican que se est moviendo el apuntador, pero no tiene porqu saltar por cada pxel que se mueve.

Configuracin del Emulador

Para poder utilizar el emulador en modo de escritura en la pantalla es necesario habilitarlo en el archivo de configuracin del dispositivo emulado, el cual se encuentra en.

C:\WTK2.5.1\wtklib\devices\QwertyDevice\Qwerty Device.properties Cambiar la propiedad touch_screen a true.