Java - Drawing shape with mouse and drag after clicking button

Question

I would like to do this without the use of the JComponent. The idea is to have multiple buttons for each a shape, by clicking a button, I can then draw the shape for that button. Unfortunately, I can't even draw the shapes right now.

public static void main(String[] args) {
    JFrame frame = new JFrame();
    JButton rect = new JButton("Rectangle");
    ActionListener rListener = new RectangleNode();
    rect.addActionListener(rListener);
    MouseListener rMListener = new RectangleNode();
    rect.addMouseListener(rMListener);
    MouseMotionListener rMMListener = new RectangleNode();
    rect.addMouseMotionListener(rMMListener);
    JButton ellipse = new JButton("Ellipse");
    JPanel panel = new JPanel();
    panel.add(rect);
    panel.add(ellipse);
    frame.add(panel);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(600, 600);
    frame.setTitle("Graph Draw");
    frame.setVisible(true);
}

The RectangleNode class

public class RectangleNode implements ActionListener,MouseListener,MouseMotionListener {
    private Point p1;
    private Rectangle r;
    private boolean rdraw;

    @Override
    public void actionPerformed(ActionEvent e) {
        rdraw = true;   
    }

    @Override
    public void mousePressed(MouseEvent e) {
        if(rdraw = true){
            p1 = e.getPoint();
            r = new Rectangle(p1.x, p1.y, p1.x - p1.x, p1.y - p1.y);
        }
    }

    @Override
    public void mouseReleased(MouseEvent e) {
        // TODO Auto-generated method stub

    }

    @Override
    public void mouseDragged(MouseEvent e) {
        if(rdraw = true){
            int x = Math.min(p1.x, e.getX());
            int y = Math.min(p1.y, e.getY());
            int width = Math.abs(p1.x - e.getX());
            int height = Math.abs(p1.y - e.getY());
            r.setBounds(x, y, width, height);
            repaint();
        }
    }

    @Override
    public void mouseMoved(MouseEvent e) {
        // TODO Auto-generated method stub

    }

    @Override
    public void mouseClicked(MouseEvent e) {
        // TODO Auto-generated method stub

    }

    @Override
    public void mouseEntered(MouseEvent e) {
        TODO Auto-generated method stub

    }

    @Override
    public void mouseExited(MouseEvent e) {
        // TODO Auto-generated method stub

    }
    public void paintComponent(Graphics g) {  
        Graphics2D g2 = (Graphics2D)g;
        g2.draw(r); ;
    }
}

I'm not sure how to use repaint, and the paintComponent method in this situation.

Answer 1

Check out Custom Painting Approaches for an example of how to dynamically draw Rectangles.

In your case you want the ability to draw a Rectangle or an Ellipse so you would need to make some changes:

1. The Java API supports a Shape class. A Shape can be a Rectangle, Ellipse, Polygon etc. So you would need to change the "ColoredRectangle" class to a "ColoredShape" class. This would allow you to store a Rectangle or an Ellipse.

2. Then in the paintComponent() code you would need to change the drawRect(..) method to be a draw( Shape ) so you can draw both Rectangles and Ellipses.

3. In the mouseDragged() logic you would need to modify the logic to check if you want to draw a Rectangle or an Ellispse. Then you would create the proper Shape and again use the draw( Shape ) method instead of the drawRect(...) method.

4. Then you would need to add a property to the class to control which Shape you want to paint. Then when you click the button you set the property. Or maybe instead of using a button you set up radio buttons for each Shape.

Anyway, play with the original code to understand how it works. That is start by converting the code to use the ColoredShape class just for Rectangles. Then once that works you can add the support for the Ellipse.