Error with drawing multiple lines on JPanel

Question

I'm trying to draw multiple lines on a JPanel . My code adds each line to an ArrayList and then a for loop is supposed to iterate through it to draw each line. But I get this odd output instead.

This is my code:

public class DrawPanel extends JPanel {

    /** Generated serial ID for the program. */
    private static final long serialVersionUID = 1697489704611349844L;

    /** The width of the panel. */
    private static final int WIDTH = 600;

    /** The height of the panel. */
    private static final int HEIGHT = 300;

    /** The stroke width in pixels. */
    private static final int STROKE_WIDTH = 1;

    /** x-coordinate when mouse is first clicked. */
    private int myX;

    /** y-coordinate when mouse is first clicked. */
    private int myY;

    /** x-coordinate when mouse is clicked for a second time. */
    private int myXEnd;

    /** y-coordinate when mouse clicked for a second time. */
    private int myYEnd;

    /** ArrayList of lines drawn. */
    private List<Line2D> myLines = new ArrayList<Line2D>();

    /** ArrayList of coordinates to draw with a pencil. */
    private List<MouseEvent> myPoints = new ArrayList<MouseEvent>();


    /**
     * Constructs a new ellipse panel.
     */
    public DrawPanel() {
        super();
        setBackground(Color.WHITE);
        setPreferredSize(new Dimension(WIDTH, HEIGHT));
        addMouseListener(myMouseHandler);
        addMouseMotionListener(myMouseMotionHandler);
        setCursor(Cursor.getPredefinedCursor(Cursor.CROSSHAIR_CURSOR));
    }

    /**
     * MouseMotionListener for drawing a shape.
     */
    private final MouseMotionListener myMouseMotionHandler = new MouseMotionAdapter() {

        @Override
        public void mouseDragged(final MouseEvent theEvent) {
            myXEnd = theEvent.getX();
            myYEnd = theEvent.getY();
            myPoints.add(theEvent);
            repaint(); 
        }

//        @Override
//        public void mouseMoved(MouseEvent e) {          
//        }

    };

    /**
     * MouseListener for drawing a shape.
     */
    private final MouseListener myMouseHandler = new MouseAdapter() {
        @Override
        public void mousePressed(final MouseEvent theEvent) {
            myX = theEvent.getX();
            myY = theEvent.getY();
            myXEnd = theEvent.getX();
            myYEnd = theEvent.getY();
            repaint();

        }

        @Override
        public void mouseReleased(final MouseEvent theEvent) {
            myXEnd = theEvent.getX();
            myYEnd = theEvent.getY();

            myPoints.add(theEvent);
            repaint();            
        }
    };

    /**
     * Draws line with drawLine method.
     */
    @Override
    public void paintComponent(final Graphics theGraphics) {
        super.paintComponent(theGraphics);
        final Graphics2D g2d = (Graphics2D) theGraphics;

        // for better graphics display
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                             RenderingHints.VALUE_ANTIALIAS_ON);

        g2d.setPaint(new Color(51, 0, 111));
        g2d.setStroke(new BasicStroke(STROKE_WIDTH));

        myLines.add(new Line2D.Double(myX, myY, myXEnd, myYEnd));

        for (Line2D l : myLines) {
            g2d.draw(l);
        }  
    }
}

And here's what it draws on the panel when I move the cursor in a circle. It's a bunch of lines connected at a center point. But I want it to be able to draw multiple separate lines. [

And this is the type of line I'd like to draw, but multiple of them without previous drawn lines disappearing. Hence, why I implemented an ArrayList to redraw lines to keep them on the panel.

[

Answer 1

I think the reason the lines are disappearing is not shown in this code. Here is how I would update it.

   @Override
    public void mouseDragged(final MouseEvent theEvent) {
        myXEnd = theEvent.getX();
        myYEnd = theEvent.getY();
        repaint(); 
    }

    @Override
    public void mousePressed(final MouseEvent theEvent) {
        myX = theEvent.getX();
        myY = theEvent.getY();
    }

    @Override
    public void mouseReleased(final MouseEvent theEvent) {
        myXEnd = theEvent.getX();
        myYEnd = theEvent.getY();
        myLines.add(new Line2D.Double(myX, myY, myXEnd, myYEnd));
        repaint();            
    }
};

/**
 * Draws line with drawLine method.
 */
@Override
public void paintComponent(final Graphics theGraphics) {
    super.paintComponent(theGraphics);
    final Graphics2D g2d = (Graphics2D) theGraphics;

    // for better graphics display
    g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                         RenderingHints.VALUE_ANTIALIAS_ON);

    g2d.setPaint(new Color(51, 0, 111));
    g2d.setStroke(new BasicStroke(STROKE_WIDTH));

    g2d.draw(new Line2D.Double(myX, myY, myXEnd, myYEnd));

    for (Line2D l : myLines) {
        g2d.draw(l);
    }  
}

This will draw one line between the two points, and it will not store the line until the mouse is released. If you actually want it to draw like a pencil, add the new line in the mouse dragged method too.