How do I enable a user to see the shape while dragging the mouse in a line drawing program?

jacobay43 :

I want the program to work such that as you drag the mouse across the panel, the shape should be showing,The shape should change in size each time you drag the mouse, and the shape that should be displayed finally is that which was being displayed at the moment the mouse was released. What currently happens is the line is invisible while being drawn with mouse drag and only appears when the mouse is released

//DrawPanel
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.JFrame;

public class DrawLine extends JPanel
{
  private LineClass lines[];
  private int lineCount;
  private LineClass currentLine;
  public JLabel statusLabel;
  private int currShapeX1,currShapeY1;

  public DrawLine()
  {
statusLabel = new JLabel("(0,0)");
lines = new LineClass[100];
lineCount = 0;
currentLine = null;

MouseHandler handler = new MouseHandler();
addMouseListener(handler);
addMouseMotionListener(handler);


  }


  public void paintComponent(Graphics g)
  {
super.paintComponent(g);

for(int count = 0; count < lineCount; ++count)
{
  lines[count].draw(g);
} 

  }

  public static void main(String args[])
  {
JFrame frame = new JFrame();
DrawLine panel = new DrawLine();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(panel);
frame.setSize(400,400);
frame.setVisible(true);
  }

  private class MouseHandler extends MouseAdapter implements   MouseMotionListener
  {
    public void mousePressed(MouseEvent event)
{
  //it assigns currentShape a new shape and initializes both points to the mouse position.
  currShapeX1 = event.getX();
  currShapeY1 = event.getY();           
}
public void mouseReleased(MouseEvent event)
{
  //finish drawing the current shape and place it in the array
  //Set the second point of currentShape to the current mouse position
    currentLine = new LineClass(currShapeX1,currShapeY1,event.getX(),event.getY());

  // and add currentShape to the array.
  //Instance variable shapeCount determines the insertion index. Set     currentShape to null and call method repaint to update the drawing with the new shape.
  lines[lineCount] = currentLine;
  lineCount++;

  currentLine = null;
  repaint();
}
public void mouseDragged(MouseEvent event)
{
  //currently not working
  /*What is desired:
   * As you drag the mouse across the panel, the shape should be showing 
   * The shape should change in size each time you drag the mouse
   * Only one shape should be shown as the mouse is being dragged
   * The shape that should be displayed finally is that which was being displayed at the moment the mouse was released
   * */
  //it sets the second point of the currentShape to the current mouse position and calls method repaint

  //finish drawing the current shape and place it in the array
  //Set the second point of currentShape to the current mouse position
    currentLine = new LineClass(currShapeX1,currShapeY1,event.getX(),event.getY());

  // and add currentShape to the array.
  //Instance variable shapeCount determines the insertion index. Set currentShape to null and call method repaint to update the drawing with the new shape.
  lines[lineCount] = currentLine;

  currentLine = null;
  repaint();
  statusLabel.setText(String.format("(%d,%d)",event.getX(),event.getY()));
}

public void mouseMoved(MouseEvent event)
{
  //to set the text of the statusLabel so that it displays the mouse coordinates—this will update the label with the coordinates every time the user moves 
  //(but does not drag) the mouse within the DrawPanel
  statusLabel.setText(String.format("(%d,%d)",event.getX(),event.getY()));
}
}
}

//LineClass
class LineClass
{
private int x1;
private int y1;
private int x2;
private int y2;

public LineClass(int x1, int y1, int x2, int y2)
{
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
}

public void draw(Graphics g)
{
g.drawLine(x1,y1,x2,y2);
}
}

Thomas :

Your problem seems to be that you're not drawing the last line that is being dragged.

In mouseDragged() you have this:

currentLine = new LineClass(currShapeX1,currShapeY1,event.getX(),event.getY());  
lines[lineCount] = currentLine;
currentLine = null;

That sets the line at index lineCount to the new line.

Yet then when rendering you do this:

for(int count = 0; count < lineCount; ++count)
{
  lines[count].draw(g);
}

You are drawing all lines except the one at index lineCount.

In mouseReleased() you then have lineCount++; and that's why the line shows up after releasing the mouse.

To fix that, I'd not add the currently dragged line to lines while dragging. Instead just update it in mouseDragged. In mouseReleased you then add it to the array and set currentLine to null.

Painting would thus look like this:

for(int count = 0; count < lineCount; ++count) {
  lines[count].draw(g);
}

if( currentLine != null ) {
  //you could set different rendering options here, e.g. a different color
  currentLine.draw(g); 
}

Finally, instead of using an array it might be better to use a List<LineClass>. That way you'd not have to track the current line count, not be limited to 100 lines or resize the array yourself.

As the list would then only contain non-null lines, rendering could look like this:

lines.forEach( line -> line.draw(g) );

if( currentLine != null ) {
  currentLine.draw(g);
}