1. Drawing Rectangle via Java AWT drawRect API
In this part of the AWT Drawing, we will see how to draw a rectangle using a mouse. The AWT API requires a corner point plus width & height of the rectangle. Graphics API method drawRect needs four parameters to draw a rectangle. Now, have a look at the below picture:
First two params are for locating the rectangle in the Graphic sheet. In our case, the sheet is a AWT Frame Window. The width and height define the rectangle’s dimension from the specified location. So, x and y denote the top-left corner of the rectangle and Width and Height denote the size of the rectangle. The below picture shows how a rectangle is drawn in the Frame window with the passed in four parameters:
Now, we need to think how to get input from the mouse to use this API. The Top-Left (x, y), we can get from the mouse pressed event. While drawing the line in the previous example, we already have it as a Point instance, FirstPoint. We can use the mouse released to get the Bottom right, SecondPoint. We used these points to draw the line and we can use these points to draw rectangle also as we can calculate the width and height from these points.
2. Mouse drawing Issue with API drawRect
In the below code, we calculate the width and height from the FirstPoint and SecondPoint objects of type Point. Recall, we got these points through mouse events in our previous part while Drawing Line. Next, the drawRect function will receive all the parameters required for drawing the line. Below is the code:
|
1 2 3 4 5 |
case "RectD": int width = Math.abs(SecondPoint.x - FirstPoint.x); int height = Math.abs(SecondPoint.y - FirstPoint.y); g.drawRect(FirstPoint.x, FirstPoint.y, width, height); break; |
The code works fine when when we press and release the on location P1 and P2 as shown below. Means, in the below picture, user pressed the mouse at location P1, dragged it, and then released it at location P2.
But, the API drawRect gives trouble when location of P1 and P2 varies. To get to know it, have a look at the below picture:
In the above picture, P1 and P2 denote where the mouse is pressed and released to draw the rectangle. The Gray Rectangle is what the user wants to draw. The black rectangle is what they get. Because we are using the drawRect API wrongly. As per our current code, the drawRect API is receiving the top-left corner from the FirstPoint (P1) instance. We stored FirstPoint when the mouse is pressed. Now have a look at the picture again and you can see the API is always taking the mouse pressed location as the Top-left corner.
In the first rectangle (Top-Left in the picture) point P1 is Top-Left corner. In all other cases, it is not. This means we must pass correct Top-Left parameter to the drawRect API.
3. Finding Top-Left Corner
There will not be any change in the way user presses and releases the mouse to draw the rectangle. We should derive the correct top-left coordinate values from these pressed and released locations. The below custom function gets the Top-left point of the rectangle from the mouse press and release locations.
|
1 2 3 4 5 6 7 8 |
//Sample 09: Relocate Rectangle Start Point private Point GetTopLeft() { Point TopLeft = new Point(); TopLeft.x = Math.min(FirstPoint.x,SecondPoint.x ); TopLeft.y = Math.min(FirstPoint.y,SecondPoint.y ); return TopLeft; } |
In the above code, we use the Math.min function to locate the Top-Left corner of the rectangle with the user selected Points instance P1 and P2. The return value is suitable for the
drawRect function of the Graphics object. Have a look at the below picture to see how this function returned point T(x,y) suits the first two parameters of the
drawRect API. This method will be useful when we are drawing rectangle using the mouse located points P1 and P2. Note, the origin (0,0) is in the top-left corner of the Frame Window and we use its Graphics object to draw the Rectangle (Refer Second Picture).
4. Fixing the drawRect Parameters
Now, we will revisit the code which draws the Rectangle. The case statement for Rectangle drawing now looks as follows after the correction:
|
1 2 3 4 5 6 7 |
case "RectD": //Sample 10: Draw Rectangle Point TopLeft = GetTopLeft(); int width = Math.abs(SecondPoint.x - FirstPoint.x); int height = Math.abs(SecondPoint.y - FirstPoint.y); g.drawRect(TopLeft.x, TopLeft.y, width, height); break; |
Here, we make call to the GetTopLeft customer function to locate the correct top-left corner for the rectangle regardless of where the mouse is pressed and released. Then we pass x and y location from this new Point instance to the
drawRect API. This will avoid the error and user will get the Rectangle as they expect.
5. AWT Drawing Part 2: Lines – Youtube Video
Categories: AWT
Tags: AWT Graphics, drawRect, Math.abs, Math.min
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.