Drawing lines with mouse on canvas : Java awt

Question

The attempt is to enable drawing of figures(a line for now) with mouse on the awt canvas . Iam trying out java graphics for the first time . So not sure how to go about it . This is my first attempt :

package def.grafi;

import java.awt.Canvas;
import java.awt.Frame;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

  public class Dra {
  Frame f = new Frame();

public void disp() {
    f.setBounds(100, 100, 200, 200);
    MosL ml = new MosL();
    Can c = new Can();
    f.add(c);
    c.addMouseListener(ml);
    c.addMouseMotionListener(ml);
    f.setVisible(true);
}

public static void main(String[] args) {
    Dra d = new Dra();
    d.disp();
}

public class MosL extends MouseAdapter {
    int sx = 0;
    int sy = 0;
    boolean onDrag = false;

    @Override
    public void mouseDragged(MouseEvent e) {
        if (onDrag) {
            int x = e.getX();
            int y = e.getY();

            Canvas comp = (Canvas) e.getSource();
            Graphics g = comp.getGraphics();
                            // comp.repaint(); << for cleaning up the intermediate lines : doesnt work :(
            g.drawLine(sx, sy, x, y);
            return;
        }
        onDrag = true;
        sx = e.getX();
        sy = e.getY();

        System.out.println("Draggg");
    }

    @Override
    public void mousePressed(MouseEvent e) {
        System.out.println("Pressed");
    }

    @Override
    public void mouseReleased(MouseEvent e) {
        System.out.println("Released");
        if (onDrag)
            onDrag = false;
    }
}

public class Can extends Canvas {
    @Override
    public void paint(Graphics g) {

    }
}
}

Problems : 1) When the windows is minimized and restored , the drawn line is gone (due to repaint) 2) What i want is the line should follow the mouse (when it is dragged) . the final line should extend from the point of pressing to the point of release of the mouse . Rite now , when the mouse moves , new lines are getting drawn . I am not sure how to clean up the intermediate lines from the canvas .

Can someone help me out on these problems ?

Solution 1

Here is a simple example of such "painting":

public static void main ( String[] args )
{
    JFrame paint = new JFrame ();

    paint.add ( new JComponent ()
    {
        private List<Shape> shapes = new ArrayList<Shape> ();
        private Shape currentShape = null;

        {
        MouseAdapter mouseAdapter = new MouseAdapter ()
        {
            public void mousePressed ( MouseEvent e )
            {
            currentShape = new Line2D.Double ( e.getPoint (), e.getPoint () );
            shapes.add ( currentShape );
            repaint ();
            }

            public void mouseDragged ( MouseEvent e )
            {
            Line2D shape = ( Line2D ) currentShape;
            shape.setLine ( shape.getP1 (), e.getPoint () );
            repaint ();
            }

            public void mouseReleased ( MouseEvent e )
            {
            currentShape = null;
            repaint ();
            }
        };
        addMouseListener ( mouseAdapter );
        addMouseMotionListener ( mouseAdapter );
        }

        protected void paintComponent ( Graphics g )
        {
        Graphics2D g2d = ( Graphics2D ) g;
        g2d.setPaint ( Color.BLACK );
        for ( Shape shape : shapes )
        {
            g2d.draw ( shape );
        }
        }
    } );

    paint.setSize ( 500, 500 );
    paint.setLocationRelativeTo ( null );
    paint.setVisible ( true );
}

it will remember all of the drawn shapes and with a small effort you can extend it to draw any other shapes you like.

Solution 2

Make use of Line2D object in the AWT package and do the following steps:

1. Create mouse (X,Y) values for first and second clicks
2. Create a boolean variable to check if the click is the first or the second
3. Make a List container to contain your Line2D objects
4. Draw them in your Can object
5. Assign the before and after (X,Y) values through the mouse listener's event

The step number 5 could be achieved through:

1. e.getX()
2. e.getY()

Where e is the mouse event and could be accesed through the parameter of the mouse listener method.

Solution 3

You should use the Line2D object in the awt package, create x and y values for the first click and the second click, and a boolean determining whether it's the first or second click. Then make an ArrayList of Line2D and draw them in your Can object. So then you can assign the before and after x and y values with your event in the mouse listener by using MouseEvent.getX() and getY().

Comments

[Andrew Thompson]

@ShawnShroyer It is best to link to the latest version of the JavaDocs. For tips on getting a link to the latest docs, see point 2 of advantages.

[hari_sree]

thanks for the code .. it helped a lot. I'm not sure why JCanvas is missing in Swing . I used awt Canvas instead of JComponent for drawing and put the drawing of shapes in the paint method of canvas. Is there any reason to prefer Jcomponent over Canvas ?

[Mikle Garin]

Well, as i know - the biggest difference is that JComponent and all of it's ancestors are double-buffered, which means that any change that happens from one paintComponent() call to another will be first rendered onto a buffered image and only then displayed. This removes an annoying blink effect, that Canvas produces when repaints.

[Thatdude1]

@MikleGarin Hello Mike, just wondering how i would edit your code so that when the mouse is released it would repaint the screen and remove the line that was just drawn ?

[Mikle Garin]

@Thatdude1 simply remove the shape that was just created by moving the mouse from shapes array and call repaint().

[GingerHead]

@theneoindian I am glad that it helped you! Please select this as your answer by clicking the green check-mark.