Draw Line While Dragging The Mouse

Question

What I'm trying to do is to draw circles and lines.

When the mouse is first pressed, I draw a small circle. Then, I need to draw a line connecting the original point to the current position of the mouse. When the mouse is released, the line remains, but when I click again, everything disappears and I draw a circle and a line all over again.

This is the code I have so far:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;    

public class Canvas4 extends JComponent implements MouseListener, MouseMotionListener {

    //constructor
    public Canvas4() {
        super();
        addMouseListener(this);
        addMouseMotionListener(this);
    }

    //some variables I may or may not use
        int pressedX;
        int pressedY;
        int currentX;
        int currentY;
        int startDragX;
        int startDragY;
        int endDragX;
        int endDragY;
        int mouseReleasedX;
        int mouseReleasedY;



    //mouse events
    public void mouseClicked(MouseEvent event)  {  }

    public void mouseEntered(MouseEvent event)  {  }

    public void mouseExited(MouseEvent event)   {  }

    public void mousePressed(MouseEvent event)  {  
        pressedX = event.getX();
        pressedY = event.getY(); 
        drawCircle();

        startDragX = pressedX;
        startDragY = pressedY;
    }

    public void mouseReleased(MouseEvent event) {  
        mouseReleasedX = event.getX();
        mouseReleasedY = event.getY();
        //repaint() here maybe???
    }



    //mouse motion events
    public void mouseDragged(MouseEvent event) {
        System.out.println("You dragged the mouse.");
        endDragX = event.getX();
        endDragY = event.getY();
        drawLine();

    }

    public void mouseMoved(MouseEvent event) {  }



    //draw circle when mouse pressed
    //this method works fine
    public void drawCircle()    {
        Graphics g1 = this.getGraphics();
        g1.setColor(Color.CYAN);
        g1.fillOval(pressedX, pressedY, 10, 10);    
    }

    //draw line when mouse dragged
    //this is where I need help
    public void drawLine()  {
        Graphics g2 = this.getGraphics();
        g2.setColor(Color.RED);
        g2.drawLine(pressedX, pressedY, mouseReleasedX, mouseReleasedY);
    }
}

Then of course, there's a main method that creates the class object and adds it to a frame and whatnot.

My two specific questions are:

1. how do I draw a line as it's dragged? The code I have currently only draws a line to the last point of mouse release.
2. When do I repaint? If I repaint in the drawCircle() method, the circle blinks in and out instead of disappearing on the next click.

Answer 1

For drawing lines i have this.When you click mouse left you retain a point next click will retain another point making a line between them , and with mouse right you make the line between first point and last point (you can delete this "if (isClosed)" if you dont want)

Another thing : it's not a good precision because pointlocation return a double and drawline need an integer and the cast loses precision.

public class PolygonOnClick extends JPanel implements MouseListener, MouseMotionListener {
ArrayList<Point> points = new ArrayList<>();
static boolean isClosed = false;

PolygonOnClick() {
    JFrame frame = new JFrame("Polygon ON CLICK");
    frame.addMouseListener(this);
    frame.setLocation(80, 50);
    frame.setSize(1000, 700);
    frame.add(this);
    frame.setResizable(false);
    frame.setVisible(true);
    frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
}

public void paintComponent(Graphics graphics) {
    super.paintComponent(graphics);
    graphics.drawString("Click stanga pentru a incepe a desena , click dreapta pentru a inchide poligonul ", 15, 15);

    for (int i = 1; i < points.size(); i++) {
        graphics.drawLine((int) points.get(i - 1).getX(), (int) points.get(i - 1).getY(), (int) points.get(i).getX(), (int) points.get(i).getY());
    }
    if (isClosed) {
        graphics.drawLine((int) points.get(points.size() - 1).getX(), (int) points.get(points.size() - 1).getY(), (int) points.get(0).getX(), (int) points.get(0).getY());
    }
}

@Override
public void mousePressed(MouseEvent e) {
    if (!isClosed) {
        if (e.getButton() == MouseEvent.BUTTON1) {
            points.add(e.getPoint().getLocation());
        }
    }
    if (e.getButton() == MouseEvent.BUTTON3) {
        isClosed = true;
    }
    repaint();
}

Answer 2

If you want to draw circles and lines then you need to keep an ArrayList of Shapes to draw. You would add an Ellipse2D.Double for the circle and a Line2D.Double for the line.

In the mousePressed event you add the Ellipse2D.Double object to the ArrayList, then you set up a temporary Line2D.Double object to contain your line information.

In the mouseDragged event you update Line2D.Double object with the new end point and then invoke repaint().

In the mouseReleased event you add the Line2D.Double object to the ArrayList and clear the variable referencing the Line2D.Double object.

Then in the paintComponent() method you add logic to:

1. iterate through the ArrayList to paint each Shape.
2. draw the Line2D.Double object when not null

Check out the Draw On Component example found in Custom Painting Approaches. This will show you the basic concept of this approach.

In the example the ArrayList only contains information on Rectangles so you will need to make it more generic to hold a Shape object. Both Ellispse2D.Double and Line2D.Double implement the Shape interface.