java - How do I fire MouseMotionListener events in real-time?

Question

I am trying to create a graphics drawing program that allows the user to draw red pixels on the screen by dragging their mouse over it. So in a way, you can think of this program as Microsoft's Paint program but with only the pencil drawing tool and color red.

Unfortunately the mouseDragged() function in my program is not working properly. It will skip some of the pixels on the screen if I move my mouse too fast, like this:

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

public class FrameView extends JFrame {
    JPanel panel;
    Graphics2D drawingContext;

    public static void main(String[] args) {
        new FrameView();
    }

    public FrameView() {
        panel = new JPanel();
        panel.addMouseMotionListener(new MouseControls());
        panel.setBackground(Color.WHITE);
        this.add(panel);
        this.setSize(new Dimension(500, 500));
        this.setTitle("Drawing Program");
        this.setVisible(true);
        drawingContext = (Graphics2D)panel.getGraphics();
    }

    private class MouseControls extends MouseAdapter {
        @Override
        public void mouseDragged(MouseEvent e) {
            int x = e.getX();
            int y = e.getY();

            final int WIDTH = 1;
            final int HEIGHT = 1;
            Shape pixel = new Rectangle(x, y, WIDTH, HEIGHT);
            drawingContext.setColor(Color.RED);
            drawingContext.draw(pixel);
        }
    }
}

Answer 1

getGraphics is NOT how painting works in Swing, instead, you should be overriding the paintComponent method of the component and performing your custom painting there.

Painting is destructive, it is expected that when ever paintComponent is called, you will completely repaint the current state of the component.

Have a look at Painting in AWT and Swing and Performing Custom Painting for more details

As to you "mouse" problem, this is actually how it works, you won't be notified of EVERY pixel position the mouse has to pass through, your mouse would lag horribly across the screen if it did. Instead, the OS moves the mouse in ever increasing steps based on the speed of the movement of the user input.

Instead of drawing just the points, draw lines between them, for example

nb: I've deliberately painted the points larger so you can see where they are been reported, you will see that all the dots (for a single drag) are connected

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

    public static void main(String[] args) {
        new Test();
    }

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        private List<List<Point>> points = new ArrayList<>(25);
        private List<Point> activeList;

        public TestPane() {
            MouseAdapter ma = new MouseAdapter() {
                @Override
                public void mouseDragged(MouseEvent e) {

                    if (activeList != null) {
                        activeList.add(e.getPoint());
                        repaint();
                    }
                }

                @Override
                public void mousePressed(MouseEvent e) {
                    activeList = new ArrayList<>(25);
                    points.add(activeList);
                }

                @Override
                public void mouseReleased(MouseEvent e) {
                    if (activeList != null && activeList.isEmpty()) {
                        points.remove(activeList);
                    }
                    activeList = null;
                }

            };
            addMouseMotionListener(ma);
            addMouseListener(ma);
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            g2d.setColor(Color.RED);
            for (List<Point> group : points) {
                Point previous = null;
                for (Point p : group) {
                    // You can get rid of this, it's simply to show
                    // where the points would actually be rendered
                    g2d.fill(new Ellipse2D.Float(p.x - 2, p.y - 2, 4, 4));
                    if (previous != null) {
                        g2d.draw(new Line2D.Float(previous, p));
                    }
                    previous = p;
                }
            }
            g2d.dispose();
        }

    }

}