how to draw rectangle on java applet using mouse drag event

Question

i am using java. i want to draw rectangle based on mousedrag event. if user dragging the mouse, then the rectangle on the applet should increase or decrease basing on current mo

Answer 1

homework?

basically what you need to do is:

1. on mouse down keep the mouse-down coordinates and repaint
2. on mouse move keep current mouse coordinates and repaint
3. on mouse up, nullify the mouse-down coordinates to indicate there is no rect, and repaint.
4. on paint, draw background and then rect between mousedown and cur-mouse coordinates.

if you don't want to keep a background image, you can do a trick with the Graphics xor function, drawing the same rect twice will erase the old rect, so you can use it to restore the old image straight on the graphics object.

Edit: code xor usage sample:

public void paint(Graphics g)
{
   g.setXORMode(Color.black);
   // draw old rect if there is one. this will erase it
   // draw new rect, this will draw xored
   g.setDrawMode(); // restore normal draw mode
}

Xor has the an interesting property:

xor(xor(x)) = x

so xoring the same pixel twice restores it's original color.

Answer 2

There are a couple issues that need to be addressed.

First, regarding only one rectangle can be drawn, this is due to the design of your program. In your code, whenever the repaintoffscreen method is called, the currectRect field is used to draw a rectangle. However, there is no provision to keep holding onto rectangles which were made in the past.

One way to keep a hold of past rectangles would be perhaps to make another field which is, for example, a List<Rectangle> which is used to store past rectangles. Then, when the mouse is released, add the current rectangle to that list.

Then, in order for all rectangles, currentRect and past rectangles to appear, repaintoffscreen will need to not only perform getDrawableRect and offscreen.drawRect using the currentRect but also with the past rectangles which are stored in the List<Rectangle>. (Hint, use a for loop to iterate through the list.)

Second, regarding the rectangle not appearing until after releasing the mouse button, rather than using the mouseDragged method, maybe using the mouseMoved method along with a check to see that the mouse button is depressed may be a workaround. (I think I've also had trouble dealing with the mouseDragged method in the past.)

The MouseEvent passed into the mouseMoved method can be used to check if a button is depressed by the getButton method:

public void mouseMoved(MouseEvent e)
{
    // Check if button1 is pressed.
    if (e.getButton() == MouseEvent.BUTTON1)
    {
        // Perform sizing of rectangle and off-screen drawing, and repaint.
    }
}

Answer 3

My question was about create a select rectangle invert mouse click position, but, in the end I got make this with this method:

...     //to set the selection area
    private int iniSelX;
    private int iniSelY;
    private int endSelX;
    private int endSelY;

    private JPanel myJPanel = new JPanel() {

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            g.setColor(Color.WHITE);
            g.fillRect(0, 0, this.getWidth(), this.getHeight());

            g.setColor(Color.red);
            g.drawLine(260, 5, 260, 260);

            g.setColor(Color.BLUE);

            //verify if go draw the rectangle
            if (iniSelX != 0 || endSelX != 0) {
                boolean revertX = iniSelX < endSelX;
                boolean revertY = iniSelY < endSelY;

                //Simple way
                //g.drawRect(iniSelX, iniSelY, endSelX - iniSelX, endSelY - iniSelY);

                //reverse way
                g.drawRect(revertX ? iniSelX : endSelX, revertY ? iniSelY : endSelY,
                        revertX ? endSelX - iniSelX : iniSelX - endSelX, revertY ? endSelY - iniSelY : iniSelY - endSelY);
            }
        }
    }; ...
        addMouseMotionListener(new MouseMotionListener() {

            @Override
            public void mouseDragged(MouseEvent m) {
                //update selection area
                endSelX = m.getX();
                endSelY = m.getY();

                repaint();
            }

            @Override
            public void mouseMoved(MouseEvent m) {
                repaint();
            }
        });

        addMouseListener(new MouseListener() {

 ...
            @Override
            public void mousePressed(MouseEvent e) {
               //start  drawing the selection
                iniSelX = e.getX() - 15;
                iniSelY = e.getY() - 20;
            }

            @Override
            public void mouseReleased(MouseEvent e) {
                //start  drawing the selection
                iniSelX = 0;
                iniSelY = 0;
                endSelX = 0;
                endSelY = 0;
            }

...
        });

    }

    public void log() {
        System.out.println("iniSelX" + iniSelX);
        System.out.println("iniSelY" + iniSelY);
        System.out.println("endSelX" + endSelX);
        System.out.println("endSelY" + endSelY);
    } ...

I hope this is useful.