Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
En este artículo vamos a ver cómo podemos hacer para arrastrar un gráfico con el ratón. Dibujaremos un rectángulo en un Canvas y haremos el código necesario para poder arrastar dicho rectángulo con el ratón.
La idea principal de este artículo es mostrar cómo arrastrar el gráfico, por lo que el código se hará "todo seguido" en una sola clase y de la forma más sencilla que se me ocurre. Más adelante, en otro artículo, haremos lo mismo pero organizando un poco mejor las clases. Al final tienes un enlace a ese otro artículo.
Al final tienes el código fuente del programa funcionando, para que lo copies y modifiques a tu gusto.
Lo primero es dibujar el rectángulo. Vamos a hacer una clase ArrastrarGrafico que herede de Canvas. Le pondremos como atributos la x,y donde queremos que se dibuje el rectángulo. Serán los atributos xRectangulo e yRectangulo de la clase y los ponemos como variables para poder modificarlos cuando arrastremos el ratón. No hace falta, pero también pondremos dos atributos con el anchoRectangulo y altoRectangulo del rectángulo.
En dicha clase, redefinimos los métodos getPreferredSize() y paint() para que devuelvan un tamaño preferido por defecto -500 pixels de alto por 500 pixels de ancho en el ejemplo- y para que dibujen el rectángulo en la posición indicada por los atributos xRectangulo e yRectangulo.
El código, hasta ahora, se puede parecer a esto
/**
* Para darle un tamaño por defecto al Canvas
de dibujo
*
* @return Dimension por defecto.
*/
@Override
public Dimension getPreferredSize()
{
return new Dimension(500, 500);
}
/**
* Dibuja el rectángulo en la posición
indicada por por xRectangulo e
* yRectangulo.
*
* @param g Graphics con el que dibujar.
*/
@Override
public void paint(Graphics g)
{
g.setColor(Color.RED);
g.fillRect(xRectangulo, yRectangulo,
anchoRectangulo, altoRectangulo);
}
}
Cuando empecemos a arrastrar el rectángulo, pondremos el ratón encima del mismo y pulsaremos el botón del ratón y podremos empezar a arrastrar. Sin embargo, si el ratón no estuviera dentro del rectángulo, lo normal es que no queramos que comience el arrastre. Es necesario, por tanto, un método que nos diga si el ratón está o no dentro del rectángulo.
El evento de ratón -pulsar el botón del ratón sobre el rectángulo- lo recibiremos con un MouseEvent. Con los métodos getX() y getY() del MouseEvent podemos saber las coordenadas sobre el Canvas en las que se ha pulsado el ratón. Debemos comprobar si estas coordenadas caen o no dentro del rectángulo.
Haremos un método que reciba un MouseEvent y devuelva true si está dentro del rectángulo y false en caso contrario. El método, dentro de la misma clase que ya tenemos, puede ser el siguiente:
return false;
}
Ahora necesitamos enterarnos de cuando pasa el ratón por encima del Canvas, se pulsa, se arrastra, etc, etc. Todo esto se hace añadiendo un addMouseMotionListener() al Canvas. A este método hay que pasarle algo que implemente la interface MouseMotionListener. Como ya he dicho que el código será chapucero para que sea simple, haremos que la misma clase ArrastrarGrafico implemente esta interface, por lo que le tendremos que poner los métodos que obliga esta interface. Además, en el constructor de la clase, añadiremos el addMouseMotionListener().
En fin, que la clase anterior tendría ahora todo esto
public class ArrastrarGrafico extends Canvas implements MouseMotionListener
{
/**
* Crea un nuevo objeto ArrastrarGrafico.
*/
public ArrastrarGrafico()
{
addMouseMotionListener(this);
}
...
public void mouseDragged(MouseEvent e)
{
...
}
public void mouseMoved(MouseEvent e)
{
...
}
Cuando empiece el arrastre y recibamos el primer evento de ratón de arrastre -movmiento del ratón con el botón pulsado-, debemo comprobar si estamos o no dentro del rectángulo para comenzar a arrastrar.
Suponiendo que estemos dentro, si es el primer evento de arrastre, tendremos las coordenadas x,y del ratón a través del MouseEvent, pero no sabremos cuánto arrastrar el rectángulo. En ningún sitio tenemos cuánto se ha movido el ratón, sino que sólo tenemos dónde está ahora.
Esto obliga a que tengamos que guardarnos las coordenadas donde estaba el ratón en el evento anterior. Para ello, la clase tendrás dos nuevos atributos: xAnteriorRaton e yAnteriorRaton.
Como la primera vez que recibamos el evento de arrastre hemos dicho que no podemos arrastrar, pero las siguientes sí, también necesitamos recordar si es la primera vez o no que recibimos ese evento. Por ello, necesitamos otro nuevo atributo boolean al que llamaremos arrastrando. Si arrastrando es false, es que no estamos en medio de un arrastre y por tanto es la primera vez que nos llaman. Si arrastrando es true, es que estamos en medio de un arrastre y podemos mover el rectángulo.
Así, la primera vez que nos llamen, si el ratón está dentro del rectángulo, guardaremos las coordenadas del ratón en los atributos xAnteriorRaton e yAnteriorRaton. Marcaremos además arrastrando a true, para indicar que hemos mpezado el proceso de arrastre.
La siguiente vez que nos llamen, tendremos arrastrando a true, por lo que moveremos el rectángulo un poco -cambiando los valores de xRectangulo e yRectangulo-, llamaremos a repaint() para obligar al repintado, nos guardaremos en xAnteriorRaton e yAnteriorRaton las nuevas posiciones y listo.
Cuando recibamos un evento de movimiento de ratón sin arrastre -un mouseMoved() en vez de mouseDragged()-, será que ha terminado el arrastre, así que marcaremos nuevamente la variable arrastrando a false.
En un evento de arrastre tenemos guardadas en xAnteriorRaton e yAnteriorRaton la posición anterior del ratón. En el evento, con getX() y getY() obtenemos las posiciones actuales del ratón. Debemos mover el rectángulo la diferencia entre la posición actual y la anterior. Es decir
xRectangulo = xRectangulo + (e.getX() - xAnteriorRaton);
yRectangulo = yRectangulo + (e.getY() - yAnteriorRaton);
Veamos ahora el código completo de estos dos métodos mouseMoved() y mouseDragged() junto con todos los atributos nuevos que hemos puesto.
public class ArrastrarGrafico extends Canvas implements MouseMotionListener
{
/**
* Si actualmente se está arrastrando o no el
rectángulo.
*/
private boolean arrastrando = false;
/**
* x en la que estaba anteriormente el ratón.
*/
private int xAnteriorRaton;
/**
* y en la que estaba anteriormente el ratón
*/
private
int yAnteriorRaton;
/**
* Método al que se llama cuando se arrastra el
ratón.
* Se comprueba con el atributo arrastrando si está
empezando el arrastre o
* ya se esta en medio del mismo.
* Si se comienza el arrastre, se guardan las coordenadas
del ratón que
* vienen en el evento MouseEvent y se cambia el valor
del atributo
* arrastrando.
* Si se está en medio de un arrastre, se calcula
la nueva posición del
* rectángulo y se llama al método repaint()
para que se pinte.
*
* @param e Evento del ratón
*/
public
void mouseDragged(MouseEvent e)
{
//
Si comienza el arrastre ...
if
(!arrastrando)
{
//
... y el ratón está dentro del rectángulo
if
(estaDentro(e))
{
//
Se guardan las posiciones del ratón
xAnteriorRaton
= e.getX();
yAnteriorRaton
= e.getY();
//
y se marca que ha comenzado el arrastre.
arrastrando
= true;
}
}
else
{
//
Si ya había empezado el arrastre, se calculan las nuevas
// coordenadas del
rectángulo
xRectangulo
= (xRectangulo + e.getX()) - xAnteriorRaton;
yRectangulo
= (yRectangulo + e.getY()) - yAnteriorRaton;
//
Se guarda la posición del ratón para el siguiente cálculo
xAnteriorRaton
= e.getX();
yAnteriorRaton
= e.getY();
//
y se manda repintar el Canvas
repaint();
}
}
/**
* El ratón se mueve sin arrastrar. Se marca fin
de arrastre.
*
* @param e Evento de ratón
*/
public void mouseMoved(MouseEvent
e)
{
arrastrando
= false;
}
}
Y ya está listo. Esto debería funcionar. En ArrastrarGrafico.java tienes el código completo, con un main() para que puedas probar que construye una ventana con el Canvas y la visualiza.
Posiblemente veas algo de parpadeo al arrastar, eso es porque no he puesto nada de doble buffer para no complicar el código.
Ahora vamos a tratar de dejar todo este código un poco mejor, de forma que se pueda reaprovechar tal cual en otros programas que hagamos que tengan figuras arrastrables. Haremos un lienzo para arrastrar figuras.