Dibujar Arrastrando El Mouse En Java

Veremos ahora como dibujar figuras geométricas arrastrando el mouse sobre la pantalla es decir conseguiremos un efecto como el de Paint de Microsoft o cualquier otra herramienta de dibujo. Para ello usaremos las librerías de Java 2D para graficar figuras geométricas y eventos del mouse como mousePressed, mouseReleased y mouseDragged.

Ahora veremos tres aplicaciones sencillas de como lograr esto, una aplicación para dibujar líneas, otro para dibujar rectángulos y otro para dibujar elipses. Aunque la diferencia entre estas son solamente algunas líneas de código.

Primeramente para crear las aplicaciones necesitamos un lugar donde dibujar en este caso dibujaremos en un JComponent, podríamos dibujar en otro componente, o también en el antiguo Canvas pero este es poco aconsejable si manejamos controles Swing. Luego de esto necesitamos capturar eventos del mouse, primero cuando se hace clic para empezar a dibujar esto es el evento mousePressed, cuando ocurra esto guardamos la posición del mouse en un objeto Point, esto será el punto inicial para graficar y luego mientras estemos moviendo el mouse ocurre el evento mouseDragged, cuando ocurra esto vamos guardando en otro objeto Point los puntos que son finales pero no definitivos, se hace esto para graficar la figura mientras se mueve el mouse para ver en donde quedara la figura definitiva y finalmente cuando dejemos de presionar el mouse debemos de dibujar la figura definitiva, este evento es mouseReleased, cuando ocurra esto ya tenemos una figura definitiva y la guardamos en un lugar donde estén todas las figuras que grafiquemos en este caso la guardamos en un ArrayList, luego ponemos los puntos de inicio y fin el null para graficar luego otra figura desde cero. En cada uno de estos eventos al final repintamos el JComponent.

Otra cosa que hay que explicar es como es método paint de estas aplicaciones, entonces ahora vemos este método de la aplicación dibujar rectángulos.

public void paint(Graphics g) {
    Graphics2D g2 = (Graphics2D) g;
    g2.setColor(Color.RED);
    for (Shape rectangulo : rectangulos) { // dibuja todos los rectangulos
        g2.fill(rectangulo);
    }
    if (inicioArrastre != null && finArrastre != null) { // se esta arrastrando el raton?
        Shape rectangulo = crearRectangulo(inicioArrastre.x, inicioArrastre.y, finArrastre.x, finArrastre.y);
        g2.draw(rectangulo);
    }
}

Lo primero en la línea 3 de este método establecemos el color rojo para todo (para el contorno, para el relleno), luego con el for en la línea 4 graficamos todas las figuras anteriores que hicimos y luego preguntamos si se sigue arrastrando el mouse, si es así vemos la existencia del método crearRectangulo, lo que hace es simplemente devolver un objeto Rectangle2D.Float con las coordenadas correctas para graficar, notemos que no siempre moveremos el mouse de arriba a abajo y de izquierda a derecha sino a cualquier otro lago, entonces por ello ajustamos las coordenadas, el método se muestra a continuación.

private Rectangle2D.Float crearRectangulo(int x1, int y1, int x2, int y2) {
    return new Rectangle2D.Float(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x1 - x2), Math.abs(y1 - y2));
}

En cuestión este método es el mas importante para ajustar el rectángulo y esa es una de las diferencias con las demás aplicaciones. La aplicación dibujar elipses es.

private Ellipse2D.Float crearElipse(int x1, int y1, int x2, int y2) {
    return new Ellipse2D.Float(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x1 - x2), Math.abs(y1 - y2));
}

Es la misma de la de los rectángulos, en las líneas es mas sencillo todavía solamente graficamos directamente los puntos obtenidos.

private Line2D.Float crearLinea(int x1, int y1, int x2, int y2) {
    return new Line2D.Float(x1, y1, x2, y2);
}

Ahora podemos descargarnos las aplicaciones fueron resueltos de la manera mas sencilla, son solamente una clase cada una.

Aplicación Dibujar Líneas

Descargar Ejecutable (.jar)

Descargar Código Fuente (.java)

Aplicación Dibujar Rectángulos

Descargar Ejecutable (.jar)

Descargar Código Fuente (.java)

Aplicación Dibujar Elipses

Descargar Ejecutable (.jar)

Descargar Código Fuente (.java)

Si quieren ver otra aplicación de como hacer un dibujo libre con el mouse también en Java pasen por aquí.