How to draw an upsidedown square by dragging mouse?

Question

How can I draw an inverted rectangle in Java using swing?

Using the 'g.drawRect(x,y,width,height)' method, Creating a rectangle through mouse drag was successful, but there was a slight error.

If you drag to a point (x2,y2| x2>x1 && y2>y1) larger than the first point(x,y), It will operate normally.

However, in the opposite case, if the coordinates of the drag point are smaller than the coordinates of the first click point, it is drawn in the opposite direction, not to the drag point direction.

Even if I tried to draw reverse it through if(), I couldn't figure out what to do.

The direction I want is like a dragging box in Window, but It's a little hard to me. Please give me some hint to overcome this hard trip.

↓Here is my code

   class Rect {
            int x, y, w, h;
   }

   public class Rectangle extends JPanel{
            int i = 0;
       int x, y = 0;
       Rect [] ary = new Rect[100];
       public Rectangle() {
           addMouseListener(new MouseListener() {
               public void mouseClicked(MouseEvent e) {}
               public void mouseEntered(MouseEvent e) {}
               public void mouseExited(MouseEvent e) {}
               public void mousePressed(MouseEvent e) {
                   if(i>100) return;
                   ary[i] = new Rect();
                   ary[i].x = e.getX(); ary[i].y = e.getY();
                   x= ary[i].x; y = ary[i].y;
               }

               @Override
               public void mouseReleased(MouseEvent e) {
                   ary[i].w = Math.abs(ary[i].x-e.getX()); 
                        ary[i].h = Math.abs(ary[i].y- e.getY());
                   i++;
                   repaint();
               }
           });

           addMouseMotionListener(new MouseMotionListener() {
               @Override
               public void mouseDragged(MouseEvent e) {
                   ary[i].w = Math.abs(ary[i].x-e.getX()); 
                   ary[i].h = Math.abs(ary[i].y- e.getY());
                   repaint();
               }
               public void mouseMoved(MouseEvent e) {
               }
           });
       }

       public void paintComponent(Graphics g) {
           super.paintComponent(g);
           for(Rect r:ary){
               if(r !=null) {
                   g.setColor(Color.BLACK);
                   g.drawRect(r.x, r.y, r.w, r.h);
               }
           }
       }
   }

please help me

Problem image

Answer 1

because ary[i].x and ary[i].y must be the minimum among the press and release coordinates:

           @Override
           public void mouseReleased(MouseEvent e) {
               ary[i].w = Math.abs(ary[i].x-e.getX()); 
               ary[i].h = Math.abs(ary[i].y- e.getY());
               // upper left point
               ary[i].x = Math.min(ary[i].x,e.getX()); 
               ary[i].y = Math.min(ary[i].y,e.getY()); 
               i++;
               repaint();
           }

Answer 2

First of all don't use an Array to store the Rectangle objects you want to paint. Use an ArrayList it will grow dynamically as you want to paint more rectangles.

The problem with your current code is that you are attempting to update the x/y/width/height values in 3 separate methods. This should only be done in the mouseDragged method.

The basic steps are:

1. in mousePressed you save the initial mouse point. Create an empty Rectangle object to used to draw the rectangle
2. in mouseDragged you compare the initial mouse point with the current mouse point and determine the minimum x/y values. You then get the absolute value for the x and y values separately so you know the width/height of the rectangle. Update the x/y/width/height values of your Rectangle object and repaint the Rectangle
3. in mouseReleased you add the Rectangle object to your ArrayList

See the DrawOnComponent example found in Custom Painting Approaches for a working example that implements the above suggestion.

The MouseInputAdapter implementation from the above example is as follows. It shows how most of the logic is in the mouseDragged method:

class MyMouseListener extends MouseInputAdapter
{
    private Point startPoint;

    public void mousePressed(MouseEvent e)
    {
        startPoint = e.getPoint();
        shape = new Rectangle();
    }

    public void mouseDragged(MouseEvent e)
    {
        int x = Math.min(startPoint.x, e.getX());
        int y = Math.min(startPoint.y, e.getY());
        int width = Math.abs(startPoint.x - e.getX());
        int height = Math.abs(startPoint.y - e.getY());

        shape.setBounds(x, y, width, height);
        repaint();
    }

    public void mouseReleased(MouseEvent e)
    {
        if (shape.width != 0 || shape.height != 0)
        {
            addRectangle(shape, e.getComponent().getForeground());
        }

        shape = null;
    }
}