java - Draw trail of circles with mouseDragged

Question

I am trying to write a program that draws a line of circles with mouseDragged, like MS paint does. I have successfully gotten my program to draw a circle when I click. I have also been successful in getting my program to draw a circle when I drag the mouse; however, this doesn't leave a line of circles behind wherever I dragged. It simply drags the same circle around. I am trying to get my program to leave a trail of circles behind where I am dragging but I am pretty confused on why my program wont do so.

package assignment_11;

import java.awt.*;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.*;


public class Canvas extends JComponent implements MouseListener, MouseMotionListener{

private int x, x1;
private int y, y1;

public Canvas() {
    addMouseMotionListener(this);
    addMouseListener(this);
}

public static void main(String[] args) {
    //creates new JFrame, sets Exit On Close, sets visible
    JFrame window = new JFrame();
    window.add(new Canvas());
    window.pack();
    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    window.setVisible(true);
}

public Dimension getPreferredSize() {
    return new Dimension(640,480);
}

@Override
public void mouseClicked(MouseEvent arg0) {
    System.out.println(arg0);
    x = arg0.getX();
    y = arg0.getY();
    repaint();

}

@Override
public void mouseEntered(MouseEvent arg0) {
    System.out.println(arg0);

}

@Override
public void mouseExited(MouseEvent arg0) {
    System.out.println(arg0);

}

@Override
public void mousePressed(MouseEvent arg0) {
    System.out.println(arg0);

}

@Override
public void mouseReleased(MouseEvent arg0) {
    System.out.println(arg0);

}

public void paintComponent(Graphics g) {
    g.fillOval(x, y, 10, 10);
    g.fillOval(x1, y1, 10, 10);
}

@Override
public void mouseDragged(MouseEvent arg0) {
    System.out.println(arg0);
    x1 = arg0.getX();
    y1 = arg0.getY();
    repaint();
}

@Override
public void mouseMoved(MouseEvent arg0) {
    System.out.println(arg0);
}


}

Any help is appreciated!

Answer 1

Painting is destructive. That is, every time paintComponent is called, you are expected to repaint the entire state of the component.

This raises the issue - you need some way to store the state you want to paint every time paintComponent is called.

For this, a simple ArrayList would do the job nicely. It would allow you to store all the points you're interested and allow you to repaint them each time paintComponent is called, for example...

import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JComponent;
import javax.swing.JFrame;

public class Canvas extends JComponent implements MouseListener, MouseMotionListener {

    private List<Point> points;

    public Canvas() {
        points = new ArrayList<>(25);
        addMouseMotionListener(this);
        addMouseListener(this);
    }

    public static void main(String[] args) {
        EventQueue.invokeLater((new Runnable() {
            @Override
            public void run() {
                JFrame window = new JFrame();
                window.add(new Canvas());
                window.pack();
                window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                window.setVisible(true);
            }
        }));
    }

    public Dimension getPreferredSize() {
        return new Dimension(640, 480);
    }

    @Override
    public void mouseClicked(MouseEvent arg0) {
        System.out.println(arg0);
        points.add(arg0.getPoint());
        repaint();

    }

    @Override
    public void mouseEntered(MouseEvent arg0) {
        System.out.println(arg0);

    }

    @Override
    public void mouseExited(MouseEvent arg0) {
        System.out.println(arg0);

    }

    @Override
    public void mousePressed(MouseEvent arg0) {
        System.out.println(arg0);

    }

    @Override
    public void mouseReleased(MouseEvent arg0) {
        System.out.println(arg0);

    }

    public void paintComponent(Graphics g) {
        for (Point p : points) {
            g.fillOval(p.x, p.y, 10, 10);
        }
    }

    @Override
    public void mouseDragged(MouseEvent arg0) {
        System.out.println(arg0);
        points.add(arg0.getPoint());
        repaint();
    }

    @Override
    public void mouseMoved(MouseEvent arg0) {
        System.out.println(arg0);
    }

}

Now, as the complexity of your problem grows, you could instead store "shapes" in the List which have some kind of notion of how to paint themselves, allowing to add in more complex shapes

You should also have a look at Painting in AWT and Swing to gain a better understand of how painting in Swing actually works