Ejemplos java y C/linux

Google
 

Tutoriales

Enlaces

Licencia

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace http://www.chuidiang.com

Arrastrar un gráfico con el ratón

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.

Pintamos el rectángulo

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

public class ArrastrarGrafico extends Canvas
{
   // posicion x,y del rectangulo, asi como su alto y ancho
   private int xRectangulo = 0;
   private int yRectangulo = 0;
   private int anchoRectangulo = 100;
   private int altoRectangulo = 100;

  /**
   * 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);
   }
}

Ver si el ratón está dentro del rectángulo

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:

/**
* Para ver si el ratón está dentro del rectángulo.
* Si está dentro, puede comenzar el arrastre.
*
* @param e El evento de ratón
*
* @return true si el ratón está dentro del rectángulo
*/

private boolean estaDentro(MouseEvent e)
{
   if (
      (e.getX() > xRectangulo) &&
      (e.getX() < (xRectangulo + anchoRectangulo)) &&
      (e.getY() > yRectangulo) &&
      (e.getY() < (yRectangulo + altoRectangulo)))
   {
      return true;
   }

  return false;
}

Suscribirse a los eventos de ratón

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)
   {
      ...
   }

Código para arrastrar el rectángulo

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.

Bueno, muy bien, pero ¿cuánto movemos el rectángulo?

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.

Estadísticas y comentarios

Numero de visitas desde el 4 Feb 2007: