|
Sucesos (events) |
Seleccionar un color en una caja de selección (Choice)
Dibujar una circunferencia de radio variable en un canvas
Un control Canvas es un control apropiado para dibujar en su superficie. El control Canvas define la función paint que pinta su superficie con el color de fondo
public void paint(Graphics g) {
g.setColor(getBackground());
g.fillRect(0, 0, width, height);
}
Para usar el control Canvas se define una clase derivada que redefina la función paint. En primer lugar, hemos de traer la información referente a la clase Canvas mediante la sentencia import.
import java.awt.*;
A continuación, definimos la clase derivada de Canvas que denominamos MiCanvas, redefinimos la función miembro paint y definimos otras funciones miembro que consideremos necesarias.
public class MiCanvas extends Canvas {
//miembros dato ...
public MiCanvas() {
//...
}
public void paint(Graphics g){
//definir esta función
}
//otras funciones miembro
}
En la clase que describe el applet, creamos el nuevo control y lo situamos en el applet como cualquier otro control.
public class CanvasApplet1 extends Applet {
MiCanvas canvas;
//...
public void init(){
canvas=new MiCanvas();
this.add(canvas, BorderLayout.CENTER);
//...
}
}
Por defecto, un Canvas no tiene tamaño, lo puede representar un problema cuando disponemos varios componentes en el applet. Por ejemplo, pueden ocurrir situaciones en las que el canvas no se vea. En este caso, es necesario redefinir las funciones miembro getPreferredSize y getMinumunSize, ambas funciones devuelven un objeto de la clase Dimension. En la siguiente porción de código se redefine getPreferredSize.
public Dimension getPreferredSize(){
return new Dimension(80, 300);
}
En los ejemplos que hemos estudiado en páginas anteriores, situamos los controles en el applet y dibujamos en la superficie del mismo. Ahora bien, es una práctica habitual, situar los controles sobre un panel en el applet y dibujar sobre un canvas tal como vamos a ver en los ejemplos que se estudian en esta página.
canvas1:
CanvasApplet1.java, MiCanvas.java
Volvemos sobre el ejemplo ya estudiado en el que se selecciona un color en un control selección (Choice). Ahora vamos pintar el canvas del color seleccionado.
La clave del programa estriba en la comunicación entre dos objetos el applet y el canvas. La selección de un elemento del control selección en el applet se refleja en un cambio en el color del canvas.
Crear el applet, en modo de diseño (pestaña Design) situar un panel en la parte superior del applet y un control selección (Choice) sobre el panel.
Establecer FlowLayout como gestor de diseño del panel, de modo que el control queda centrado en el panel.
Establecer BorderLayout como gestor de diseño del applet, de modo que el panel quede al norte (NORTH)
Añadir al proyecto una clase derivada de Canvas denominada MiCanvas
Para crear una clase derivada de Canvas en el Entorno Integrado de Desarrollo (IDE) de JBuilder, una vez creado el proyecto, se selecciona File/New y a continuación se selecciona el icono Class en el diálogo New. Cuando se pulsa OK aparece el diálogo New Java File para la creación de una nueva clase. En el campo Class name se introduce el nombre de la clase, en este caso MiCanvas, y en el campo Extends la clase de la cual deriva, por defecto es java.lang.Object, que sustituímos por java.awt.Canvas.
En el modo código fuente (pestaña Source), crear un objeto de la clase MiCanvas y añadir dicho objeto al applet en la posición central (CENTER), véase el apartado anterior.
Llenar el control selección (Choice) con los elementos siguientes : rojo, verde, azul
Crear un array colores de objetos de la clase Color, con los colores primarios.
Color[] colores={Color.red, Color.green, Color.blue};
Redefinir en la clase MiCanvas la función paint para que pinte todo el canvas del color seleccionado.
La clave del programa está como se ha mencionado, en la comunicación entre los dos objetos: el applet y el canvas.
Seleccionamos el control selección. En el panel Events hacemos doble-clic sobre el editor asociado a itemStateChanged. JBuilder genera el nombre de la función respuesta para que solamente tengamos que introducir el código que define la tarea a realizar
En el código de la función respuesta obtenemos el índice del color seleccionado en el control selección, y se lo pasamos a la función setColor miembro de la clase MiCanvas. Alternativamente, se podría pasar un objeto de la clase Color.
public class CanvasApplet1 extends Applet {
//...
void lista_itemStateChanged(ItemEvent e) {
int indice=lista.getSelectedIndex();
canvas.setColor(indice);
}
}
En la clase MiCanvas se define la función miembro setColor y se redefine la función paint, para que pinte todo el canvas del color seleccionado. Desde setColor se llama a la función paint. Dentro de esta última, la función getSize obtiene el tamaño del canvas, el miembro width proporciona la anchura, y el miembro height la altura.
package canvas1;
import java.awt.*;
public class MiCanvas extends Canvas {
final Color[] colores={Color.red, Color.green, Color.blue};
int indice=0;
public MiCanvas() {
setBackground(colores[0]);
}
void setColor(int indice){
this.indice=indice;
repaint();
}
public void paint(Graphics g){
g.setColor(colores[indice]);
g.fillRect(0, 0, getSize().width, getSize().height);
}
}
|
Cada vez que se selecciona un color en la caja de selección se llama a la función respuesta lista_itemStateChanged miembro de la clase que describe el applet. Esta llama a setColor miembro de la clase que describe el canvas, y finalmente, ésta llama a paint para pintar el canvas.
canvas2:
CanvasApplet2.java, MiCanvas.java
Se ha estudiado ya el control barra de desplazamiento, y cómo responder a las acciones del usuario sobre el dedo, las flechas o las regiones comprendidas entre el dedo y las flechas. En vez de dibujar la circunferencia en el applet dibujaremos la circunferencia en un canvas.
Se sugiere al lector que elabore por sí mismo el diseño y la respuesta a las acciones del usuario sobre la barra de desplazamiento, y establezca la comunicación entre el applet y el canvas, de modo que los cambios en la posición del dedo en la barra de desplazamiento se reflejen en el radio de la circunferencia que se dibuja en el canvas.
Crear el applet, en modo de diseño (pestaña Design) situar una barra de desplazamiento en la parte superior del applet.
Establecer BorderLayout como gestor de diseño del applet, de modo que la barra de desplazamiento quede al norte (NORTH)
Añadir al proyecto una clase derivada de Canvas denominada MiCanvas
En el modo código fuente (pestaña Source), crear un objeto de la clase MiCanvas y añadir dicho objeto al applet en la posición central (CENTER).
Redefinir en la clase MiCanvas la función paint para que dibuje una circunferencia centrada en el canvas..
En modo diseño, se selecciona el control barra de desplazamiento y en su correspondeinte pane Event se hace doble-clic sobre el editor asociado a adjustmentValueChanged. En la función respuesta le pasamos la posición del dedo en la barra de desplazamiento, es decir, el radio de la circunferencia al control canvas mediante la llamada a la función miembro setRadio de la clase MiCanvas.
public class CanvasApplet2 extends Applet {
//...
void sbRadio_adjustmentValueChanged(AdjustmentEvent ev) {
canvas.setRadio(ev.getValue());
}
}
En la clase MiCanvas se define la función miembro setRadio y se redefine la función paint, para que pinte la circunferencia con el radio especificado. Desde setRadio se llama a la función paint.
El centro de la circunferencia está situado en el centro del canvas. Obtenemos el tamaño del canvas de la misma forma que lo obtuvimos para el applet, mediante getSize. El miembro width proporciona la anchura del canvas, y el miembro height su altura.
package canvas2;
import java.awt.*;
public class MiCanvas extends Canvas {
int radio=10;
public MiCanvas() {
setBackground(Color.white);
}
void setRadio(int radio){
this.radio=radio;
repaint();
}
public void paint(Graphics g){
int x1=getSize().width/2;
int y1=getSize().height/2;
g.setColor(Color.black);
g.drawOval(x1-radio, y1-radio, 2*radio, 2*radio);
}
}
|
Cada vez que se actúa sobre el dedo en la barra de desplazamiento, sobre las flechas situadas en los extremos de la barra, o en las dos regiones comprendidas entre las flechas y el dedo, se se llama a la función respuesta sbRadio_adjustmentValueChanged que establece el valor del radio, leyendo la posición del dedo en la barra de desplazamiento, a continuación se llama setRadio miembro de la clase que describe el canvas, y finalmente, ésta llama a paint para pintar la circunferencia centrada en el canvas con el radio especificado.