Drawing shape on mouse drag

Question

class MyPanel extends JPanel implements Observer, MouseMotionListener, MouseListener {
private MyModel model;
private View view; 
private String mode; 
private Rectangle rectangle;
private Square square;

public MyPanel(MyModel model, View view) {
    this.setBackground(Color.black);
    this.setPreferredSize(new Dimension(300, 300));
    this.addMouseListener(this);
    this.addMouseMotionListener(this);
    this.model = model;
    this.model.addObserver(this);

}

public void paintComponent(Graphics g) {

    super.paintComponent(g);
    Graphics2D g2d = (Graphics2D) g;

    ArrayList<Rectangle> rectangles = this.model.getRectangles();
    for (Rectangle r : getRectangles()) {

        int width = Math.abs(r.getStartPoint().getX() - r.getEndPoint().getX());
        int height = Math.abs(r.getStartPoint().getY() - r.getEndPoint().getY());
    }

    ArrayList<Square> squares = this.model.getSquares();

    for (Square sqr : getSquares()) {

        int xPosition = Math.min(sqr.getStartPoint().getX(), sqr.getEndPoint().getX());
        int yPosition = Math.min(sqr.getStartPoint().getY(), sqr.getEndPoint().getY());
        int width = Math.abs(sqr.getStartPoint().getX() - sqr.getEndPoint().getX());
        int height = Math.abs(sqr.getStartPoint().getY() - sqr.getEndPoint().getY());       
    }

    g2d.dispose();
}

public void update(Observable o, Object arg) {
    this.repaint();
}

@Override
public void mouseDragged(MouseEvent e) {

    if (this.mode.equals("Rectangle")) {

        this.rectangle.setEndPoint(e.getX(), e.getY());
        this.model.addRectangle(this.rectangle);
    }

    else if (this.mode.equals("Square")) {


        // What code should I add here?

        this.model.addSquare(this.square);

    }

}

// MouseListener below
@Override
public void mouseClicked(MouseEvent e) {}

@Override
public void mousePressed(MouseEvent e) {

    if (this.mode.equals("Rectangle")) {
        this.rectangle = new Rectangle(e.getX(), e.getY());
    }

    else if (this.mode.equals("Square")) {
        this.square = new Square(e.getX(), e.getY());

    }
}

@Override
public void mouseReleased(MouseEvent e) {

    if (this.mode.equals("Rectangle")) {

        this.rectangle.setEndPoint(e.getX(), e.getY());
        this.model.addRectangle(this.rectangle);
        this.rectangle = null;
    }

    else if (this.mode.equals("Square")) {
        this.model.addSquare(this.square);
        this.square = null;
    }

}

@Override
public void mouseEntered(MouseEvent e) {}
@Override
public void mouseExited(MouseEvent e) {}

}

The user chooses a mode, rectangle or square. Then they can draw a square or a rectangle with their mouse (live feedback is shown). Here is my drawing panel class. I was successfully able to implement the rectangle mode. The user can draw a rectangle and as they move their mouse, the rectangle is shown in mid construction. I want to do the same for the square mode. For some reason, I'm having a hard time doing this. How would I show a perfect square in mid construction when the user is moving their mouse and how would I draw it once released? What code should I add to my paintComponent method, mouseDragged, mousePressed and mouseReleased method to do this? It was easy for a rectangle because there was no constraint but I'm not sure how to do it for a square with my current implementation.

@Hovercraft Full Of Eels I have changed the "==" signs. I know how to create a rectangle with mouse drag but I am not sure about square. — Jack Kong, Nov 02 '17 at 04:17
This question was originally close as a duplicate of: https://stackoverflow.com/questions/15776549/create-rectangle-with-mouse-drag-not-draw. I don't see how it is a duplicate since that question deals with drawing a Rectangle which OP states is already working. This question is about drawing a square which is slightly different so I re-opened the question. — camickr, Nov 02 '17 at 04:18
It's nothing but [simple math](https://stackoverflow.com/a/19885648/522444). Surely you can figure this one out. — Hovercraft Full Of Eels, Nov 02 '17 at 04:18
@camickr: see similar question [here](https://stackoverflow.com/questions/19885499/drawing-a-square-by-dragging-the-mouse) — Hovercraft Full Of Eels, Nov 02 '17 at 04:19
@Hovercraft Full Of Eels I saw the calculations you posted and I implemented that code in my mouseDragged method but it still doesn't work for some reason. — Jack Kong, Nov 02 '17 at 04:19
@JackKong: work the math out on paper. Again, it's nothing more than HS geometry. — Hovercraft Full Of Eels, Nov 02 '17 at 04:20
Side issue: never dispose of a Graphics object passed into a painting method as you're doing. That's dangerous. Only dispose of ones that you yourself create (and casting is not creating). — Hovercraft Full Of Eels, Nov 02 '17 at 04:21
`see similar question` - yes but that was not the answer used as a duplicate — camickr, Nov 02 '17 at 04:22
@HovercraftFullOfEels, so I don't see why the question would be closed as a duplicate if you can't link to the proper duplicate. If anybody looks at this in the future they won't find the answer by following the duplicate link. — camickr, Nov 02 '17 at 05:12
Please do not vandalize your posts. This invalidates the comments and answers posted. By posting on the Stack Exchange network, you've granted a non-revocable right for SE to distribute that content (under the [CC BY-SA 3.0 license](https://creativecommons.org/licenses/by-sa/3.0/)). By SE policy, any vandalism will be reverted. If you would like to disassociate this post from your account, see [What is the proper route for a disassociation request?](https://meta.stackoverflow.com/q/323395) — adiga, Nov 05 '17 at 07:15

score 1 · Answer 1 · answered Nov 02 '17 at 04:19

1

    int width = Math.abs(r.getStartPoint().getX() - r.getEndPoint().getX());
    int height = Math.abs(r.getStartPoint().getY() - r.getEndPoint().getY());

I would guess that the "size" of the square would be the maximum of the above two values.

Then I would think you would just use:

r.drawStyle(g2d, xPosition, yPosition, size, size);

answered Nov 02 '17 at 04:19

camickr

321,443
19
166
288

Thanks so much. So a square is being drawn but the only problem is that the mouse drag is acting funny. The mouse doesn't seem to stay on one corner of the square. Should I make changes to code in my mouseDragged method? – Jack Kong Nov 02 '17 at 04:26
`The mouse doesn't seem to stay on one corner of the square.` no of course if won't unless you drag a diagonal line. Painting a Rectangle will not cause the mouse to move to a new position. You might be able to use the Robot class to move the mouse to the proper position, but you logic will need to more complex since you need to know whether to move the mouse to the top/left or bottom/right depending on the direction of mouse dragging. – camickr Nov 02 '17 at 05:09
So should I use the same code as the rectangle for mousePressed and mouseDragged? Should I make any changes? – Jack Kong Nov 02 '17 at 05:15
You can't use the same code since you have a different requirement. You need to customize the code for your new requirement. – camickr Nov 02 '17 at 14:30

Drawing shape on mouse drag

1 Answers1