1. FreeHand Drawing by Mouse Drag
In the last few examples, we performed line and rectangle drawing using Java AWT Graphics API and here we will learn how to perform FreeHand Drawing. For line and rectangle drawing, we used the mouse events pressed and released. We record Point P1 while user presses the left mouse button and P2 when the user releases it. Also note, we reset the P1 and P2 in each mouse press and store a new coordinate value in the point P1. So, our example treats mouse press as the drawing start and release as its end. Once the mouse is released, our example performs the drawing. Therefore, we call the repaint on the mouse release. The below picture shows how we collected the points P1 and P2 while drawing line and rectangle.
But for Free-Hand drawing, we should not wait till mouse release. We should draw while the mouse is dragged. This means we need to arrange the points P1 and P2 on each reported drag event. In the first part of the below picture, the Red Cross line shows the MouseEvent which AWT reports to the listener. We can still use the drawLine API and connect the currently reported point with the previous one. The net effect is a smooth curve even-though what we draw is a straight line in small chunks. Note, AWT reports the drag events so quickly and hence user will not see the straight inter-connected lines.
The second part shows how we store the points P1 and P2. In the above picture, P1 and P2 in blue are the points we store at the first drag event. The red P1 and P2 are the Points stored as part of the second drag events. For the second drag, we assign Point P2 of the previous drag as Point P1 and assign P2 from the MouseEvent reported for the current drag location. This way, in each reported drag, we draw a line connecting P1 and P2.
2. Switch Case for FH Drawing
In the case structure, we still perform the Line Drawing using the drawLine Graphics API. The code is quite same for the LineD case as well. But instead of combining both the cases we kept it alone as in future it may deviate from the Line drawing.
|
1 2 3 4 5 6 7 8 |
case "FreeH": //Sample 11: Free Hand Drawing g.drawLine( FirstPoint.x, FirstPoint.y, SecondPoint.x, SecondPoint.y); break; |
We need to invoke the paint handler while user drags the mouse. This means we need to register the AWT Frame Window with the Mouse Motion Listener.
|
1 2 |
//Sample 12: Register Mouse Motion Listener addMouseMotionListener(this); |
3. Change Mouse Release
In Line and rectangle drawing, we registered the second point in the mouseReleased Listener function. But for Free-Hand drawing, this second point should come from each of the drag events while mouse is moving. So, we add the below condition:
|
1 2 3 4 5 6 7 |
//Sample 06: Set Second Point //Sample 13: Introduce the Condition if (DrawMode.compareTo("FreeH") != 0) { SecondPoint.setLocation(e.getX(), e.getY()); repaint(); } |
4. FreeHand Drawing on Mouse Drag
In the mouseDragged event handler, we collect the second point only when the drawing mode is Free-Hand. First, we shift the content of the second point from previous drag event to the first point. Then we assign the second point with a fresh one from the current drag location. Finally, we make a call to the paint method.
Note, we used the
repaint method with Line and rectangle drawing mode. Since
repaint will erase the background we will end up with flickering when use that method here in the drag handler. So, we call the
getGraphics method on the Frame window to get the underlying Graphics object and then call the paint method by supplying it as an argument. The below code performs smooth free-hand drawing with no flickering.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public void mouseDragged(MouseEvent e) { //Sample 14: Perform Free Hand Drawing if (DrawMode.compareTo("FreeH") == 0) { if (SecondPoint.x != 0 && SecondPoint.y != 0) { FirstPoint.x = SecondPoint.x; FirstPoint.y = SecondPoint.y; } SecondPoint.setLocation(e.getX(), e.getY()); paint(getGraphics()); } } |
Below picture shows how a free-hand drawing is performed using our example. Note, here user can press down any mouse button and drag it to perform the free-hand drawing:
5. AWT Drawing Part 4: FreeHand Drawing – Youtube Video
Categories: AWT
Tags: drawLine, getGraphics, mouseDragged, paint, repaint
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.